function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jon McDermottJon McDermott 

VF page renderas PDF does not render correct HTML

I have a VF page that I am rendering in PDF where part of the content is an Ordered List, with some embedded Unordered Lists. When I use the renderas="pdf" argument in my apex:page line the embedded lists do not render correctly. If I take out the renderas="pdf" argument in the apex:page line, the resulting HTML page does render correctly.

 

Here is an example VF page:

 

<apex:page standardController="Opportunity" sidebar="false"
    showheader="false" cache="true" renderas="pdf">
<HTML>
<head></head>
<body>
    <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum est in elit volutpat 
    lacinia. Integer scelerisque enim eu quam tempor in sagittis urna consequat. Morbi euismod, 
    quam nec malesuada lacinia, erat elit varius metus, in vehicula nisl nibh non leo.</P>
    <OL>
        <LI>Curabitur vel euismod est. Nunc id ligula dui, at mollis risus:
        <UL>
            <LI>Morbi ultrices feugiat leo, ut luctus augue lobortis eget;</LI>
            <LI>Vestibulum dignissim risus at turpis pretium ut facilisis dolor bibendum.</LI>
        </UL>
        </LI>
        <LI>IAliquam aliquam porta tellus, sit amet tempor ligula lobortis vitae:
        <UL>
            <LI>Nunc suscipit dui vitae dui sagittis non scelerisque sem ultrices;</LI>
            <LI>Fusce sit amet lorem sed metus tincidunt tristique;</LI>
            <LI>Cras rutrum enim ac ipsum ullamcorper scelerisque</LI>
        </UL>
        </LI>
        <LI>Aenean eu neque mattis nibh viverra facilisis viverra ac sapien. Integer 
            sed mauris at nibh volutpat varius ac volutpat dolor.</LI>
        <LI>Vestibulum euismod ipsum sed eros faucibus laoreet arius diam sit amet 
             metus venenatis nec imperdiet nibh dapibus.</LI>
    </OL>
    <P>Aliquam luctus turpis non lectus rhoncus non hendrerit eros facilisis. Nulla facilisi. 
    Nunc blandit tortor id nisl egestas semper tristique nunc cursus. Donec vulputate venenatis mi, 
    vitae pretium nisl dapibus eu. Sed purus nisi, malesuada in imperdiet ac, rhoncus sit amet velit. 
    Sed a quam nec lorem consectetur bibendum ut quis augue. Mauris et nulla eget purus sodales 
    tempor vitae at diam.</P> 
</body>
</html> 
</apex:page>

 The rendered PDF page shows as follows:

 

 

 

 

Whereas if I remove the renderas="pdf" in the apex:page line and let the page render as HTML, I get the following result:

 

 

 

Seems like the PDF render within VF is not producing reasonable output results for this example.

 

Has anyone else seen this type of issue?  Is there any way to weork around the problem?

Best Answer chosen by Admin (Salesforce Developers) 
Cyril CatonCyril Caton
Hi,

have you tried to enforce the list type? As you've seen on the non-pdf version of your VF page, the default list types are "disc" for <ul> and "decimal" for <ol>. Explicitly add style="listStyleType:square" to your inner <ul> list may fix this issue...

All Answers

RockDeveloperRockDeveloper

Prior to the Spring ’13 release, some images and CSS files would not display properly on Visualforce pages rendered as a PDF document. This update improves the PDF rendering engine to ensure better compatibility. You should test this update in a sandbox or Developer Edition account first to verify your PDFs are generated correctly.
Jon McDermottJon McDermott
Thanks for the suggestion.

However, I had the issue both before and after the Spring '13 release. I was waiting for the completion of the Spring '13 release in the hopes that it would fix this issue. No joy, the problem manifests itself after the Spring '13 release to my instances.
Cyril CatonCyril Caton
Hi,

have you tried to enforce the list type? As you've seen on the non-pdf version of your VF page, the default list types are "disc" for <ul> and "decimal" for <ol>. Explicitly add style="listStyleType:square" to your inner <ul> list may fix this issue...
This was selected as the best answer
Jon McDermottJon McDermott

Thanks for the suggestion, that works.

 

 I thought I had tried this approach as ai was trying to solve the problem but apparently I did not hit on the right style approach.

 

For the record, what works is the following:

 

<LI style="list-style-type:square">

 

In place of "square" you can use any of the available property values.

 
jasonrennekingjasonrenneking

I've also had some issues with Ordered List and nesting multiple <ol> and <li> tags.  I wrote a post about this that may be helpful.  You can view it here - Visualforce Fun with HTML Lists <ol> <li>

 

I had to specify the style to use, manually add indent for the sub bullets and had to hard code in the numbers I needed.  My code looked great in HTML.

 

Hopefully the information in the post will be helpful.