Skip to main content
T
tdriley
Known Participant
January 20, 2011
Question

<cfdocument> Strange Behavior With CSS Styles

  • January 20, 2011
  • 3 replies
  • 3156 views

Hi all, I hope someone can shed some light on this frustrating problem.

I have two columns of lists (definition lists) in an existing webpage, which are side by side, so the user can compare the data in them. So the HTML looks something like this:

<div class="container">

     <dl class="first">

          <dt>First title</dt>

          <dd>First definition</dd>

     </dl>

     <dl class="second">

          <dt>Second title</dt>

          <dd>Second definition</dd>

     </dl>

</div>

That's simpled down but you get the idea. And the CSS:

.container {width:100%;}

.first,.second {float:left; width:50%;}

And that displays as I want in the browser, with each list side by side. But, when I use cfdocument to output a PDF, the DL lists are 100% width and appear on top of each other. I've tried every CSS technique I can think of (adjusting floats, clears, pixel widths, !important) to get it to work but they are always 100% of the way across the document, one above the other.

When I do some tests starting with a blank HTML document and using the code above, I am able to style it and the PDF displays them side by side as required. However, I need to do this with an existing page and it just won't do it. Always 100% width, even when I remove every single style that is targeting that page. I've tried removing each element one by one with display:none; in the CSS and each DL list is always 100% of the width. I can change colours etc but it wants to always make the lists the full width.

Big thanks if anyone can help with what might be causing this behavior.

    This topic has been closed for replies.

    3 replies

    M
    meensi
    Inspiring
    January 21, 2011

    The best way would be use CFSAVECONTENT; all the codes which you want to display in PDF.. have it inside your CFSAVECONTENT and inside the CFDOCUMENT, put the variable name of the CFSAVECONTENT you will get the required format as it is displayed in the browser.

    <cfsavecontent variable="strContent">

    <div class="container">

         <dl class="first">

              <dt>First title</dt>

              <dd>First definition</dd>

         </dl>

         <dl class="second">

              <dt>Second title</dt>

              <dd>Second definition</dd>

         </dl>

    </div>

    .container {width:100%;}

    .first,.second {float:left; width:50%;}

    <!---- all pdf output code ---->

    </cfsavecontent>

    <cfdocument format="PDF" orientation="#strOrient#"><!--- strOrient will have an value of Landscape or Portrait--->
        <cfoutput>#strContent#</cfoutput>
    </cfdocument>

    I hope this will solve your problem.

    T
    tdrileyAuthor
    Known Participant
    January 21, 2011

    Thanks meensi, I tried this but it output the PDF exactly as before

    T

    M
    meensi
    Inspiring
    January 21, 2011

    Thats sad

    When I had the same problem, i used SAVECONTENT, it was coming properly, though i had changed some width and styles.

    If the overlapping is the problem, is it good if we increase the PDF page size??

    I saw one attribute in CFDOCUMENT, where you can set the pageType.

    Check it.

    Page type into which ColdFusion generates the report:

    • legal: 8.5 inches x 14 inches.

    • letter: 8.5 inches x 11 inches.

    • A4: 8.27 inches x 11.69 inches.

    • A5: 5.81 inches x 8.25 inches.

    • B4: 9.88 inches x 13.88 inches.

    • B5: 7 inches x 9.88 inches.

    • B4-JIS: 10.13 inches x 14.31 inches.

    • B5-JIS: 7.19 inches x 10.13 inches.

    • custom: custom height and width. If you specify custom, also specify the pageHeight and pageWidth attributes, can optionally specify margin attributes and whether the units are inches or centimeters.

    T
    TJ Downes
    Participating Frequently
    January 20, 2011

    Also, I wanted to mention that it looks like you are outputting tabular data. That is the best use for tables and you may find it a lot easier just to use tables for this particular layout

    T
    TJ Downes
    Participating Frequently
    January 20, 2011

    cfdocument/pdfs dont fully support the CSS spec. you are best sticking to HTML 4 attributes to set the styles you want.

    Overall you will find that laying out complex documents and generating them with cfdocument is going to be painful.

    T
    tdrileyAuthor
    Known Participant
    January 20, 2011

    Thanks TJ, that's good advice, but the reason it is annoying me so much is that I have been able to get two DLs to float side by side when I start from a blank page, so I know it must be possible... I just can't narrow down why this one want to display them all the way across.

    But thanks, maybe it's time to get the page rebuilt.

    T
    TJ Downes
    Participating Frequently
    January 20, 2011

    I hear you. I did a massive project a couple of years ago, converting all of an organizations paper forms to online format, generated by cfdocument. It was excruitiating, and led to hundreds of hours of microformatting. We also found that the layout would vary per user, depending on the system and fonts. In the end, we decided to use LiveCycle Designer to create templates and just have CF populate them. It took a while to get the hang of it, but the result were documents that were better than the originals, more flexible than cfdocument and a lot more reliable. There are a number of challenges in doing it this way, and it also limits you to (I believe) Acrobat 9 or better.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices