2

I have a visualforce page which has a nested list structure. Sample code below.

Visualforce page

<apex:page controller="RoleStructure" showHeader="false" >

  <html>
    <apex:form >
        <ul>
          <li>Node 1</li>
          <li>Node 2</li>
               <ul>
                  <li>Node 2.1</li>
                      <ul>
                        <li>Node 2.1.1</li>
                           <ul>
                             Node 2.1.1.1
                           </ul>
                        <li>Node 2.1.2</li>
                     </ul>
                  <li>Node 2.2</li>
                     <ul>
                        <li>Node 2.2.1</li>
                            <ul>
                               Node 2.2.1.1
                            </ul>
                        <li>Node 2.2.2</li>
                     </ul>
              </ul>
        </ul> 

      </apex:form>
    </html>
   </apex:page>

As a normal VF page it will follow the default List styles (below)

  • Node 1
  • Node 2
    • Node 2.1
      • Node 2.1.1
        • Node 2.1.1.1
      • Node 2.1.2
    • Node 2.2
      • Node 2.2.1
        • Node 2.2.1.1
      • Node 2.2.2

But when I render the VF page as PDF, the list structure is not properly formatted (Below).

  • Node 1
  • Node 2
  • Node 2.1
  • Node 2.1.1
  • Node 2.1.1.1
  • Node 2.1.2
  • Node 2.2
  • Node 2.2.1
  • Node 2.2.1.1
  • Node 2.2.2

Not sure if this is a limitation of the the VF PDF rendering but is there any workaround ?

2

You'll need to write some conditional CSS to use for when you're rendering as a PDF. The problem you're facing is the Salesforce PDF render engine will only support CSS 2.1. The default stylesheets are enabling CSS that's beyond ver 2.1 or equivalent JS/Ajax functionality that does the expansion and contraction of your nodes. The Render engine won't recognize that active content functionality, so you'll need to duplicate it with conditional styling.

  • I understand. Probably creating a set of varying left padding custom styles and assigning it to the nodes depending on the branch level will do the trick. Thanks for the advice. – Brav Mar 27 '19 at 11:21
  • I'll leave the CSS solution to you to suit your needs. Thus the reason I explained the problem as there are obviously numerous ways of solving this. :) – crmprogdev Mar 27 '19 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.