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
Jordan VasquezJordan Vasquez 

Visualforce Page RenderAs PDF does not respect <ol> start attribute

Hello everyone,

I am having an issue with the renderAs=pdf functionality using Visualforce pages.

We often have ordered lists that are broken and are restarted, so <ol start="num"> is used.

It does not look like Visualforce pages while rendered as PDFs respect the start attribute.

Example code:

<ol>
<li> List Item 1</li>
<li>List Item 2</li>
</ol>
<apex:image src="src"></apex:image>
<ol start="3">
<li>List Item 3</li>
</ol>

Should be displayed like this:
1. List Item 1
2. List Item 2
{{IMAGE HERE}}
3. List Item 3

Instead it is displayed like this:
1. List Item 1
2. List Item 2
{{IMAGE HERE}}
1. List Item 3


Is there something that could be done to get around this? We have a need to dynamically create PDFs of Knowledge Articles so it needs to dynamically load the content of the Knowledge Article that is passed to it.

Thanks

Raj VakatiRaj Vakati
try this
  
<ol>
<li> List Item 1</li>
<li>List Item 2
<br/>
<apex:image src="src"></apex:image>

</li>
</ol>
<ol start="3">
<li>List Item 3</li>
</ol>

 
Jordan VasquezJordan Vasquez
Hi Raj,

While I know this would work there is a need for it to work the way it currently is written. We have a separate Knowledge Manager that composes these articles. I cannot simply tell them that they can no longer start a ordered list from a different number. There needs to be a way to deal with this that does not require fixing the underlying html in our knowledge articles.
Santosh Reddy MaddhuriSantosh Reddy Maddhuri
Hi Jordan Vasquez,

Here is the solution for your issue without changing order.Hope this helps!

Note : I have added url attribute and sample image for demo purposes.Pls change according to your needs.

Working code : 
<apex:page renderAs="pdf" applyHtmlTag="false" showHeader="false">

 <head>
    <style> 

        
        ol {
          list-style: none;
          counter-increment: start 0;
          }
        li:before {
          content: counter(start, decimal) ") ";
          counter-increment: start;
          }
  </style>
  </head>  

 <ol>
<li> List Item 1</li>
<li>List Item 2</li>
</ol>

<apex:image url="/img/samples/stars_500.gif"></apex:image>

<ol start="3">
<li value="3">List Item 3</li>
</ol>

</apex:page>


Result pdf snippet :

User-added image

If this helps,mark this as best answer so others too can benefit.

Regards,

Santosh.
 
Santosh Reddy MaddhuriSantosh Reddy Maddhuri

Hi Jordan Vasquez,

Also pls change linke 26 to <li>List Item 3</li> from <li value="3">List Item 3</li> It works.

Regards,

Santosh.
Jordan VasquezJordan Vasquez
Hi Santosh,

That was close but no cigar. It seemed to add bullet points in front of sub-bullets. Also, we have multiple lists on the same article. I am sorry if this was something that I should have mentioned from the start. 

Example, this is what we can expect in an article of ours:
1. List Item 1
2. List Item 2
{{IMAGE}}
3. List Item 3

Header for new Section of article
1. List Item 1
1. Sub List Item 1
2. Sub List Item 2
2. List Item 2
3. List Item 3
Dominic BirdDominic Bird
I can confirm I have the same issue and the pdf export ignores start parameter in ordered lists. The CSS provided has the same issue. The list now increments rather than every list starting as a new list, but the start parameters are still ignored and the list is in a different order.
Dominic BirdDominic Bird
Apoliges, this fix does work now I've applied a class to each list and altered the css for each class. 
.c2:before {
  content: counter(start, decimal) ". ";
  counter-increment: start

}