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
Martin Chalot 15Martin Chalot 15 

Multi Column Body with Visualforce (renderAs PDF)

Hi,
I'm trying to write my text inside one block.
Example, I have this : 
<div> 
AAA 
BBB 
CCC 
DDD
</div>
And I want the visualforce page to render it this way : 
AAA      CCC
BBB      DDD
The text "AAA BBB CCC DDD" would be a long area field. And I need to display it on two columns when rendering as PDF.

I've tried to use the CSS (column-count, column-width) but nothing seems to be working. He doesn't understand this specific CSS. I tried on a basic HTML page and the render is as I want it so I'm guessing it's coming from restricted CSS rules about VF pages.
 
Can you help me ?

Thanks,
Best regards,
Martin
Suraj TripathiSuraj Tripathi
Hi Martin,

In your block, you can write the data inside <p> tag, you want to display on separate columns. and give the id to the <div>  tag
like this. 
<div id = "contenedorBody"> 
<p>AAA</p>
<p>BBB</p>
<p>CCC</p>
<p>DDD</p>
</div>


and then,

Try to add this to your css: 
<style type="text/css" media="print">
        
        #contenedorBody p:nth-child(1){
        float: left;
        width: 45%;
        }        
        #contenedorBody p:nth-child(2){
        float: right;
        width: 45%;
        }
        #contenedorBody p:nth-child(3){         
        float: left;         
        width: 45%;         
        }
        #contenedorBody p:nth-child(4){         
        float: right;         
        width: 45%;         
        }
    </style>

OR

you can give inline CSS like this to each <p> tag 
<div>
<p style="float: left; width: 45%">AAA</p>
<p style="float: right; width: 45%">BBB</p>
<p style="float: left; width: 45%">CCC</p>
<p style="float: right; width: 45%">DDD</p>
</div>


Hope it will help you, if it helps you, kindly mark this answer as solved.
Regards
Suraj
 
Martin Chalot 15Martin Chalot 15
I understand what you want to do but you got me wrong. The AAA BBB CCC DDD string isn't separated. Basically I need to do this : 
<div>
{!My_Big_Text__c}
</div>
And it has to display it correctly on two columns. And I don't want to make apex estimating sizing, it won't be very clean. What I tried to do exactly so far is this : 
<head>
<style>
.newspaper {
    text-align: justify;
    font-size:9px;
    column-width : 200px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
     column-count : 2;
     column-gap: 40px;
}
</style>
</head>
<body>
<div class="newspaper">
A super long size text with a lot of line
</div>
</body>
That's the best I can think of but it seems not to understand column-* CSS markups. I think that's because I display it in a PDF format and he cannot guess the actual height of the document since it's splitted in pages.
Maybe wrap it inside @page body content it would work. I'm going to try.

Regards,
Martin

 
ryanschierholzryanschierholz
Did you ever firgure it out? I am also hoping to get CSS column-* working in a Visualforce PDF page.