Print Format font-size and flex issue

1

Hello, I create one report in and add html file with custom class and local site in get output proper like pdf result is

image
image846×111 8.38 KB

But live(cloud) code push this local site code but this pdf result output
image
image864×192 9.56 KB

Both output come different how to get same result local and live(cloud) and this report html in pass



From Date: {{ from_date }}


{% if user_full_name %}

User: {{ user_full_name }}


{% endif %}

To Date: {{ to_date }}


and css .date-container {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
} How to solve this layout issue and get same output in live(cloud) and local

2

Hii @Runway

can you share whole print format ?

3

Hello, @nilpatel42 Yes Sure
Html code is :

Employee Score Report /* Add custom styles here */ h1{ text-align: center !important; margin-bottom: 35px !important; color: #00239c !important; font-weight: 600 !important; font-size: 30px !important; } h2{ text-align: center !important; font-weight: 900 !important; margin-bottom: -8px !important; font-size: 24px !important; } body { font-family: Arial, sans-serif !important; margin: 0 !important; padding: 0 !important; font-size: 16px !important; } table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; padding: 0 !important; } th, td { border: 1px solid #dddddd !important; padding: 8px !important; text-align: left !important; } td{ text-align: right!important; } .text-left{ text-align: left!important; } th { background-color: #f2f2f2!important; } .date-container { display: flex; justify-content: space-between; margin-bottom: 10px; } 
    .width{
        width: 250px!important;
    }
</style>

Employee Score Report

From Date: {{ from_date }}

{% if user_full_name %}

User: {{ user_full_name }}

{% endif %}

To Date: {{ to_date }}

4

i came across this issue, i found out it doesnt support flexbox
use float instead

5

Hello @519_Hamza_Habeeb, Using float place of the flexbox your issue is solved or not?

6

yes it worked

7

Ok @519_Hamza_Habeeb I Apply Css in Flex place float class like .date-container {
overflow: auto;
margin-bottom: 10px;
}
.date-container p {
float: left;
margin: 0;
padding: 0;
width: 30%;
}
.date-container p:last-child {
float: right;
} but it is not working still has issues locally in perfect live(cloud) in not properly running

8

Hello @519_Hamza_Habeeb ThankYou using float place flex it is proper work.

9

welcome