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 ?

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
2
  • 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
    Commented Mar 27, 2019 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
    Commented Mar 27, 2019 at 12:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .