3

My code is something like that:

<apex:page renderAs="pdf" standardController="Account" extensions="AB_CNT_Generar_InfoAbante" sidebar="false" showHeader="false" applyBodyTag="false" >

<apex:stylesheet value="{!$Resource.CSS_AB_Generar_InfoAbante}"/>
<head>
    <style type="text/css" media="print">
        #contenedorBody {
            /* background: #dee1e4; */
            column-count: 2;
            column-width: 100px;
            column-gap: 20px;
            /* column-rule: 0px solid #ccc; */
            text-align: justify;
            width: 100%;
            height: 1018px;
            max-width: 100%;
            max-height: 1018px;
        }

        .contenedorFooter {
            width: 100%;
            height: 48px;
            max-height 48px;
            /* background: rgb(255, 220, 206); */
        }
    </style>
</head>
<div id="contenedorBody">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="contenedorFooter">
    <table>
        <tr>
            <td class="width70">&nbsp;</td>
            <td class="width30"><apex:image styleclass="imgFooter" width="145" height="46" value="{!$Resource.imgLogoAbante}"/></td>
        </tr>
    </table>
</div>

But it still displaying this: Image Pdf 1 But this is what I want: Image Pdf 2 I'm just trying to split my text in two columns, but when I render my page as PDF it looks like the CSS stop working. Could somebody help me? Thank you!

Improve this question
2
  • PDF rendering is tricky. You may try inline styling. Check this link developer.salesforce.com/page/…
    – Saroj Bera
    Commented Mar 2, 2017 at 17:09
  • 3
    I am NOT voting to close this question, while it is CSS related the specifics of the CSS are unique to the Salesforce implementation of the PDF renderer so it is unlikely that another network would be able to help
    – Eric
    Commented Mar 2, 2017 at 18:20

3 Answers 3

Reset to default
1

You've tagged your question with CSS3. The Flying Saucer Render engine used by Salesforce to render PDF's doesn't support CSS3. Instead, it only supports HTML 4.1 and CSS 2.1. Your best bet for what you want to do is to put this content in a table with either 2 or 3 columns. The 3rd column can be used to maintain a center margin rather than relying on calculating a separate left and right margin for each column of text that you're going to need for the justified text; something which could get a bit messy.

Improve this answer
0

Try to add this to your css:

#contenedorBody p:nth-child(1){
   float: left;
   width: 45%;
}

#contenedorBody p:nth-child(2){
   float: right;
   width: 45%;
}

You can increase each column width by increasing the 45% number.

Improve this answer
0

You can also use the <apex:stylesheet> tag. Something like this will also help you to keep your code clean:

<apex:stylesheet value="{!URLFOR($Resource.YourCSSZip, 'MyCSS.css')}"/>

You can use it in combination with standardStylesheets="false" on the top <apex:page> tag. You need to set showHeader to false as well, but I see you already has done that.

Improve this answer

You must log in to answer this question.

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