Css is not working and pdf form got distorted while converting html to pdf

Hi,



html send in the above post. Please provide the solution.

Hi there,

Thank you for sharing source HTML. While testing the scenario with latest version of Aspose.Pdf for NET 8.4.0, I've managed to reproduce the issue and logged it in our bug tracking system as PDFNEWNET-35825 for further investigation and resolution. I've also linked your request to this issue and you will be notified via this thread as soon as it is resolved.

Please feel free to contact us for any further assistance.

Best Regards,

Hi,

Is this issue resolved now?

What We need to resolve it at our end?

Do We need to add latest aspose dll or Do We need to do some modifications in our code to get it resolved. Kindly advise.

Please respond asap

Regards,

Palak

Hi Palak,


Thanks for your inquiry. I’m afraid your reported is still not resolved as we have recently noticed the issue and its still pending for the investigation with other priority tasks. Please spare us little time we will keep you updated about the issue progress via this forum thread.

Thanks for your patience and cooperation.

Best Regards,

HI,

Can You please provide any update on this issue?

Regards,

Palak

Hi Palak,


We are sorry for the inconvenience, your reported issue is not resolved yet. We are unable to share any estimate at the moment as its investigation is pending and its in a queue with other priority tasks. As soon as its completed we will be in good position to share an ETA.

Best Regards,

The issues you have found earlier (filed as PDFNEWNET-35825) have been fixed in Aspose.Pdf for .NET 9.1.0.

For further details, you may check this blog post.


This message was posted using Notification2Forum from Downloads module by Aspose Notifier.

HI Palak,

Thanks for your patience. You may use new DOM approach for HTML to PDF conversion. Please try following code snippet, it will fix the issue.

HtmlLoadOptions options = new HtmlLoadOptions();<o:p></o:p>

// use the new conversion engine<o:p></o:p>

options.UseNewConversionEngine = true;<o:p></o:p>

// load HTML file<o:p></o:p>

Document pdfDocument = new Document(“Input.html”, options);

// save output as PDF format<o:p></o:p>

pdfDocument.Save(myDir + “Output.pdf”);

<o:p>
</o:p>

<o:p>Please feel free to contact us for any further assistance.</o:p>


Best Regards,

We have a similar issue where CSS is not being applied to the HTML, I even tried to use the HTMLLoadOptions for the baseURL but it still doesn’t work. The CSS actually is on the same server as our website containing all the converter code.

I have similar issue as the above post, the HTML is as below, when I try to convert the CSS doesnt get applied

<html>
<head>
    <title></title>
    <link href='http://10.100.169.225/css/pdfPrint.css' rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="formWrap left">
    <div class="formCont left">
        <h1>
            <img src="http://10.100.169.225/Content/images/IAA_logo.gif" /> Title Transmittal
        </h1>
        <div class="headerDate">
            Date: <strong>1/5/2024</strong>
        </div>
    </div>
        
    <div class="formCont left">
        <h4>General Information</h4>
        <fieldset class="col1 left">
            <label for="lblSalvageProviderName" class="txt_top">Provider:</label>
            <span class="valOnly">Commercial - Progressive Casualty Insurance Company</span>
            <br/>
            <label for="lblSalvageProviderAddress" class="txt_top">Address: </label>
            <span class="valOnly">6300 Wilson Mills Road E64 Mayfield Village, OH . 44143</span>
            <br/>
            <label for="lblAdjuster" class="txt_top">Adjuster:</label>
            <span class="valOnly">Trombley, Amanda</span>
        </fieldset>

        <fieldset class="col2 left">
            <label for="lblStockNo" class="txt_top">Stock # / Branch:</label>
            <span class="valOnly">35751789 / Little Rock</span>
            <br/>
            <label for="lblClaim1" class="txt_top">Claim #: </label>
            <span class="valOnly">1212121</span>
            <br/>
            <label for="lblPolicy" class="txt_top">Policy #: </label>
			<span class="valOnly">   </span>
        </fieldset>
    </div>
      
    <div class="formCont left">
        <h4>Vehicle Information</h4> 
        <fieldset class="col1 left">
            <label for="lblVIN" class="txt_top">VIN:</label>
            <span class="valOnly">5NPEC4AC5BH041176</span>
            <br/>
            <label for="lblYearMakeModel" class="txt_top">Year/Make/Model:</label>
            <span class="valOnly">2011 / HYUNDAI / SONATA</span>
            <br/>
            <label for="txtMileage" class="txt_top">Mileage:</label>
            <br />
            <label for="lblInsuredName" class="txt_top">Insured:</label>
            <span class="valOnly">Test</span>
            <br/>
            <label for="lblOwnerName" class="txt_top">Owner:</label>
            <span class="valOnly">Test</span>
        </fieldset>

        <fieldset class="col2 left">
            <label for="txtAcv">ACV $:</label>
            <br/>
            <label for="txtEstCostOfRepair">ECR $:</label>
            <br/>
            <label for="lblLossType" class="txt_top">Loss Type:</label>
            <span class="valOnly">Other</span>
            <br/>
            <label for="lblLossDate" class="txt_top">Date of Loss:</label>
            <span class="valOnly">01/02/2024</span>
            <br/>
        </fieldset>
    </div>

    <div class="formCont left">
        <h4>Document Information </h4>
        <fieldset class="col1 left">
            
            <label class="extended">Please process an application for a:</label>
            <div class="r_options">
            <label>Salvage Title / Certificate</label><br/>
            <label></label>
            </div>
            <br />
            <h4><font style="color: #000;">Enclosed Documents</font></h4>
            <div class="r_options">
            </div>
        </fieldset>

        <fieldset class="col2 left">
			<label>Application State:</label>
            <span class="valOnly">Arkansas
            </span>
                
            <label>Company Name:</label>
                <span class="valOnly">Commercial - Progressive Casualty Insurance Company</span>

            <label class="extended">Comments:</label>
            <div class="r_options">
            <label></label><br/>
           </div>
        </fieldset>
    </div>

    <div class="formCont left">
        <div class="col1 left">
            <h4><font style="color: #000;">Mail to:</font> Insurance Auto Auctions</h4>
            <div class="branchDetails">
                <span class="branchName">Title Center (LA)</span>
                <div id="BranchInfo">
                29000 S. Frost Road<br>
                Livingston, LA. 70754<br>
                855686781<br>
(225) 686-6197                    <span>Fax</span>
                </div>
            </div>
        </div>

        <div class="col2 left">
            <h4>Provider Contact</h4>
            <div class="providerInfo">
                <span class="name">Amanda Trombley</span><br>
                qaproviderservices@iaai.com<br>
                 
                
            </div>

            
        </div>
    </div>
</div>
<!--end of formWrap div-->
</body>
</html>
<p class="new-page"></p>

@skaushik

In such cases when your HTML has external CSS and resources, you need to make sure that the path to resources is specified in HtmlLoadOptions like below:

HtmlLoadOptions options = new HtmlLoadOptions("{path to resources}");

Please use above suggestion and let us know if issue still persists.

I tried to do that, still did not work, Then I copied the CSS inline in the HTML in head tag and when I heck the HTML just before conversion it is perfectly formatte dbut the PDF generated has formatting issues, specially with styles like display:inline-block etc. The version we use is 22.8 which is supposed to have resolution for css.

I pasted the HTML below, please try at your end once.


<html>
<head>
    <title></title>
    
</head>

<body>
    <div class="formWrap left">
    <div class="formCont left">
        <h1>
            <img src="http://10.100.169.225/Content/images/IAA_logo.gif" /> Title Transmittal
        </h1>
        <div class="headerDate">
            Date: <strong>1/11/2024</strong>
        </div>
    </div>
        
    <div class="formCont left">
        <h4>General Information</h4>
        <fieldset class="col1 left">
            <label for="lblSalvageProviderName" class="txt_top">Provider:</label>
            <span class="valOnly">Insurance Auto Auctions - Manchester</span>
            <br/>
            <label for="lblSalvageProviderAddress" class="txt_top">Address: </label>
            <span class="valOnly">75 Lowell Rd. Salem, NH . 03079</span>
            <br/>
            <label for="lblAdjuster" class="txt_top">Adjuster:</label>
            <span class="valOnly">Slensky, Ed</span>
        </fieldset>

        <fieldset class="col2 left">
            <label for="lblStockNo" class="txt_top">Stock # / Branch:</label>
            <span class="valOnly">35753212 / Phoenix</span>
            <br/>
            <label for="lblClaim1" class="txt_top">Claim #: </label>
            <span class="valOnly">23244224</span>
            <br/>
            <label for="lblPolicy" class="txt_top">Policy #: </label>
			<span class="valOnly">   </span>
        </fieldset>
    </div>
      
    <div class="formCont left">
        <h4>Vehicle Information</h4> 
        <fieldset class="col1 left">
            <label for="lblVIN" class="txt_top">VIN:</label>
            <span class="valOnly">1B7GG2AN9YS629756</span>
            <br/>
            <label for="lblYearMakeModel" class="txt_top">Year/Make/Model:</label>
            <span class="valOnly">2000 / DODGE / DAKOTA</span>
            <br/>
            <label for="txtMileage" class="txt_top">Mileage:</label>
            <br />
            <label for="lblInsuredName" class="txt_top">Insured:</label>
            <span class="valOnly">Test, Test</span>
            <br/>
            <label for="lblOwnerName" class="txt_top">Owner:</label>
            <span class="valOnly">Test, Test</span>
        </fieldset>

        <fieldset class="col2 left">
            <label for="txtAcv">ACV $:</label>
            <br/>
            <label for="txtEstCostOfRepair">ECR $:</label>
            <br/>
            <label for="lblLossType" class="txt_top">Loss Type:</label>
            <span class="valOnly">Other</span>
            <br/>
            <label for="lblLossDate" class="txt_top">Date of Loss:</label>
            <span class="valOnly">01/02/2024</span>
            <br/>
        </fieldset>
    </div>

    <div class="formCont left">
        <h4>Document Information </h4>
        <fieldset class="col1 left">
            
            <label class="extended">Please process an application for a:</label>
            <div class="r_options">
            <label>Salvage Title / Certificate</label><br/>
            <label></label>
            </div>
            <br />
            <h4><font style="color: #000;">Enclosed Documents</font></h4>
            <div class="r_options">
            </div>
        </fieldset>

        <fieldset class="col2 left">
			<label>Application State:</label>
            <span class="valOnly">Arizona
            </span>
                
            <label>Company Name:</label>
                <span class="valOnly">Insurance Auto Auctions - Manchester</span>

            <label class="extended">Comments:</label>
            <div class="r_options">
            <label></label><br/>
           </div>
        </fieldset>
    </div>

    <div class="formCont left">
        <div class="col1 left">
            <h4><font style="color: #000;">Mail to:</font> Insurance Auto Auctions</h4>
            <div class="branchDetails">
                <span class="branchName">Title Center (AZ)</span>
                <div id="BranchInfo">
                2299 West Broadway Road<br>
                Phoenix, AZ. 85041<br>
                (855) 686-7813<br>
(602) 305-5360                    <span>Fax</span>
                </div>
            </div>
        </div>

        <div class="col2 left">
            <h4>Provider Contact</h4>
            <div class="providerInfo">
                <span class="name">Ed Slensky</span><br>
                qaproviderservices@iaai.com<br>
                9898379674 
                    <span>  Ext. 123</span>
                
            </div>

            
        </div>
    </div>
</div>
<!--end of formWrap div-->
</body>
</html>
<p class="new-page"></p><style> body {background: #FFF; margin: 0; font-family: Arial, Tahoma; text-rendering: optimizeLegibility; font-size: 100%; color: #333;} h1, h2, h3, h4, h5, h6 {margin: 0; text-shadow:1px 1px 1px rgba(0,0,0,.10)} h1 {font-size: 1.125em;} h2 {font-size: 1em;} h3 {font-size: 0.875em;} h4 {font-size: 0.813em;} h5 {font-size: 0.688em;} h6 {font-size: 0.625em;} p, ul, blockquote, pre, td, th, label {margin: 0; font-size: 68.8%; line-height: 1em;} table {border-collapse: collapse; border-spacing: 0;} fieldset{border: 0 none; padding: 0;} a {color: #a70000; outline: none; text-decoration: none;} .clear{clear: both;} .header{display: block; position: relative; height: 3.5em; background: #FFF; border-bottom: 1px solid #CCC; width: 100%;} .logo{height:50px; width: 160px; position: absolute; top: 1%; left: 1%;} .pgTitle{position: absolute; top: 0.4em; left: 8em; font-weight: bold; text-shadow: 1px 1px 1px #FFF; font-size: 1.5em;} .printDate{position: absolute; top: 5px; right: 1%; width: 450px; text-align: right; font-size: 10px; color: #666;} .pgWrapPrint{display: block; width: 100%; margin: 0 auto; min-width: 100%; padding: 1% 0;} .std-grid{margin-right: 1%; margin-left: 1%;} .std-grid th, .std-grid td{text-align: left;} .std-grid th {border-bottom: 0.1em solid #333; color: #000; padding: 0.3em; vertical-align: bottom;} .std-grid th:first-child{border-left: 0em;} .std-grid th, .std-grid th a{font-size: 10px; text-decoration: none;} .std-grid tr td {border-bottom: 0.1em solid #CCC; padding: 0.3em; vertical-align: top;} .std-grid .txtC{text-align: center;} .std-grid .txtR{text-align: right;} .vehDetInfo{margin: 0 2%;} .detailHeader{border-bottom: 1px solid #CCC; padding: 0.4em 2%; position: relative;} .detailHeader .item{font-size: 0.667em; font-weight: normal; line-height: 1.5em; display: block;} .detailHeader .ymm{margin-top: 0.2em; min-height:16px;} .primaryDetails{margin: 0.5em 0;} .primaryDetails .mainImg{width: 124px; float: left; margin-right: 0.5em;} .primaryDetails .imgCont{height: 93px; background: #999;} .primaryDetails .g2{width: 46%; display: inline; float: left; margin: 0 1%;} .primaryDetails .branchBidCont{overflow-y: hidden;} .branchBidCont .branchInfo{text-align: center; padding: 0.2em 0; border-bottom: 1px solid #CCC; font-size: 0.75em; margin-bottom: 0.5em;} .branchBidCont .col{text-align: center; color: #666; float: left; width: 25%;} .branchBidCont .col label{font-size: 0.688em; text-transform: uppercase; font-weight: bold;} .branchBidCont .col h2{color: #333; font-size: 95%;} .branchBidCont .col .percAcv{font-weight: normal;} .branchBidCont .col .percAcv span{font-size: 90%; margin-left: 0.3em;} .branchBidCont .lastcounter{width: 100%; float: left; text-align: center; margin-top: 0.5em} .branchBidCont .lastcounter label{text-transform: uppercase; font-weight: bold; color: #666; font-size: 0.688em;} .branchBidCont .lastcounter p{font-weight: bold; margin: 0;} .actionCont{position: relative; margin-top: 1em; margin-bottom: 1em;} .actionCont .b2{width: 96%; display: block; margin: 0 1% 0.5em 1%;} .actionCont .action_ind h3{text-align: center; padding: 0.5em} .actionCont .action_ind h3 .sp-ic{margin-right: 0.3em;} .action_ind .action_ind h3 .acvPerc{font-size: 0.75em;} .action_ind .finaloffer{background: #e69b29; color: #FFF; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);} .action_ind .countersent{background: #238723; color: #FFF; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);} .action_ind .buyercounter{background: #e8e8e8; color: #c90107; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);} .action_ind .countersent .acvPerc, .action_ind .buyercounter .acvPerc{font-weight: normal; font-size: 0.75em; text-shadow: none;} .action_ind p{text-align: center; padding: 0.3em; color: #000; margin: 0;} .action_ind .subMsg{padding: 1em 0;} .primaryDetails .subInfoCont{margin-bottom: 0.5em;} .primaryDetails .subInfoCont h4{background: #e8e8e8; padding: 0.5em; color: #000; text-shadow: 1px 1px 0 #FFF;} .primaryDetails .subInfoCont .sectionInfo{padding: 0.3em 0; margin-bottom: 0.3em; height: 18em; overflow-y: hidden;} .subInfoCont .sectionInfo .histDateAmt{font-size: 0.75em; font-weight: bold; color: #000; padding: 0.2em 0.5em;} .sectionInfo .rerunTag{display: inline; font-size: 0.75em; color: #666; padding-left: 0.5em;} .sectionInfo .rerunTag .sp-ic{margin-right: 0.5em; vertical-align: text-bottom;} .sectionInfo .bidHistory{margin-top: 0.3em; padding: 0.5em; height: 12em; border-top: 1px solid #CCC;} .sectionInfo .bidHistory span{font-size: 0.688em; margin-right: 0.7em;} .subInfoCont .infoLists label, .subInfoCont .infoLists span{display: block; float: left; vertical-align: top; font-size: 0.75em; margin-top: 0.5em;} .subInfoCont .infoLists span a{text-decoration: underline;} .subInfoCont .infoLists label{margin-right: 1.5%; color: #666; width: 30%; text-align: right;} .subInfoCont .infoLists span{width: 65%;} .primaryDetails .subInfoCont h2 .ic-mv{vertical-align: middle; margin-right: 1em;} .primaryDetails .subInfoCont .result_base{margin: 0; padding: 0.7em; line-height: 1em;} .subInfoCont .sectionInfo .mvCriteria{font-size: 0.75em; padding: 0.3em 0.7em;} .subInfoCont .resultBrkDn{border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; padding: 0.3em 0.7em;} .subInfoCont .resultBrkDn p{margin-bottom: 0.5em; font-size: 0.75em; line-height: 2em;} .subInfoCont .resultBrkDn p span, .subInfoCont .resultBrkDn p label{font-size: 1em;} .subInfoCont .resultBrkDn label{color: #666; margin-right: 0.3em;} .subInfoCont .resultBrkDn span{font-weight: bold; margin-right: 0.3em;} .subInfoCont .resultBrkDn .noresults{display: block; padding: 0.3em; font-size: 0.75em; line-height: 1.3em;} .primaryDetails .subInfoCont .noteText{display: block; color: #666; padding: 0.3em 0.7em; font-size: 0.688em; font-style: italic;} .FourColWrap .col{width: 23%; margin-right: 1%; margin-left: 1%; display: inline; float: left;} .FourColWrap .col h2{color: #a70000; padding: 0.3em 0; text-indent: 4%; margin-bottom: 0.5em; border-bottom: 0.15em solid #999; } .FourColWrap .col h2 span{display: block; height: 1em; padding: 0.4em 3% 0.6em; margin: -0.35em 0.2em 0 0; float: right; width: 30%; text-align: right;} .rcont{display: block; font-size: 13px; font-weight: bold;} .subCat{font-size: 12px; font-weight: normal; padding: 0 0 0 5%; background: #f5f5f5;} .r2cont{border:1px solid #CCC; margin-bottom: 0.5em; display: block; font-size: 13px; font-weight: bold;} .rcont .name, .rcont .count{display: inline-block; margin: 1% 2.5%;} .r2cont .name, .r2cont .count{display: inline-block; margin: 2% 2.5%;} .rcont .name, .r2cont .name{width: 70%; overflow: hidden; text-overflow: ellipsis;} .rcont .count, .r2cont .count{width: 16%; text-align: right; vertical-align: top;} .printRefinersWrap{padding: 0 1%; width: 98%;} .refCategory{padding: 0.25em 0; border-bottom: 1px solid #e8e8e8; float: left; width: 98%;} .refCategory .refTitle{float: left; width: 10%; margin-right: 2%; font-size: 0.688em; font-weight: bold; color: #666;} .refCategory .refSelValues{float: left; width: 85%; font-size: 0.688em; text-transform: uppercase;} .formWrap{max-width: 850px; height:auto; position: relative; margin: 0 auto;} .formWrap .formCont{padding: 10px 0; border-bottom: 1px solid #e8e8e8; clear: both; width: 100%; float: left; margin: 0 15px;} .formCont h1{color: #333; font-size: 1.75em;} .formCont h1 img{vertical-align: middle; margin: 0 30px 0 10px;} .formCont .overview{font-size: 11px; color: #666; line-height: 16px; padding: 5px 0;} .formCont .headerDate{position: absolute; top: 0; right: 0; width: 8em; text-align: right; padding: 10px 15px 0 0; color: #666; font-size: 0.75em;} .formCont .reqTxt{color: red; font-weight: bold;} .formCont .subTxt{color: #666; font-size: 11px; font-weight: normal;} .formCont h4{color: #a70000; padding-bottom: 10px; font-size: 1.25em} .formCont fieldset{position: relative;} .formCont .col1, .formCont .col2{width: auto; display: inline-block;} .formCont .col1{margin-right: 5%;} .formCont fieldset label{width: 9em; color: #666; display: inline-block; margin: 0 0.6em 1.25em 0; font-size: 1em;} .formCont fieldset > span{display: *inline-block;} .formCont fieldset label span{font-size: 11px; color: #999;} .formCont fieldset .valOnly{display: inline-block; width: 15em;} .formCont fieldset .smLbl{width: 25px; padding-left: 10px;} .formCont fieldset .extended{width: 100%; margin: 0 0 3px 0;} .formCont fieldset .extended .req{display: inline; position: static;} .formCont fieldset .r_options{padding-bottom: 16px;} .formCont fieldset .r_options label{display: inline; color: #000; margin-right: 15px; line-height: 1.5em;} .formCont fieldset .txt_top{vertical-align: top;} .formCont .fullWidth{width: 95%;} .formCont .optionInfo{padding-left: 2em; color: #666;} .formCont .mailtoHeader{color: #333;} .formCont .mailtoHeader label{width: 105px; display: inline-block;} .formCont .branchList{font-weight: bold; width: 90%;} .formCont .branchDetails, .formCont .providerInfo{width: 320px; margin-right: 30px; padding-left: 0.5em;} .formCont .branchDetails .branchName, .formCont .providerInfo .name{font-weight: bold;} .formCont .emailOptions{margin-top: 0.5em; color: #333;} thead {display: table-header-group; } tr, img {page-break-inside: avoid; } img {max-width: 100% !important; } @page {margin: 0.5cm} .ace-logo{ width:15rem; } .payment-amount { border: 2px solid #000; padding: 10px; } .print-title{ color:red; } .ml-75 { margin-left: 7.5rem !important; } .mr-100 { margin-right: 10rem !important; } .ml-150 { margin-left: 15rem !important; } body{ overflow:hidden!important; } #aspnetForm { display: none !important; } </style>

The PDF is generated but not the same format as the HTML. The columns are not taking “display: inline-block;” and probably some other style tags too, and they are wrapping up

HTML format(correct):
image.png (15.8 KB)

PDF format(incorrect):

image.png (42.5 KB)

@skaushik

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): PDFNET-56295

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

Any updates?

Is this issue resolved now?.
.

@oppocreaty @skaushik

The ticket was recently logged in our issue tracking system and will be prioritized on first come first serve basis. We will surely let you know as soon as we have some updates to share in this regard. Please spare us some time.

We are sorry for the inconvenience.

Sorry to keep bugging but just want to understand how much time normally it takes for these types of tickets to get resolved, is it in terms of days or months? I know we need premium support for status updates but just want to understand if these tickets in regular queue also get resolved eventually? We have a bug stopping us from various enhancements, and we are forced to even look for alternate solutions for this if it is not resolved sooner than later.

@skaushik

The ticket PDFNET-56295 has been resolved recently and due to free support model, it will be prioritized on first come first serve basis as we already shared.

Therefore, resolution time of the issue may depend upon the number of issues logged prior to it (both paid and free support tickets) as well as level of complexity of the issue. We strongly recommend that you opt for paid support option if this is a showstopper for you.

On the other hand, we have recorded your concerns as well and we will surely consider them during the ticket investigation. As soon as we make some progress towards its resolution, OR we have any news about the ETA, we will update you via this forum thread.

We apologize for the inconvenience.