1

I am new to Visualforce and i want to make a page to represent a contract (render as PDF). I am trying to make 2 tables display side by side. I tried a lot of things with CSS but could not find solution. When not rendering as PDF, the tables are displayed side by side. However, when rendering as PDF, tables go the one under the other. Could anyone shed some lights on this?

I want the table with "Customer Data" and "Product Selection" to be side by side. enter image description here

My code is here: Could anyone suggest what i am doing wrong? Thx!

<!-- 16/12/2020 @ggalaios: Sample Application form used for Document Generation  -->

<apex:page docType="html-5.0" renderAs="pdf" standardController="csclm__Agreement__c" extensions="csclmcb.ClausesController,customAgreementController" standardStylesheets="false"
           sidebar="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false">
    <head>
        <!-- Stylesheets -->
        <apex:stylesheet value="{!URLFOR($Resource.csclmcb__slds, '/assets/styles/salesforce-lightning-design-system-vf.css')}" />
        <apex:stylesheet value="{!$Resource.csclmcb__PDFDocumentStyle}" />
        <apex:stylesheet value="{!URLFOR($Resource.csclmcb__PDFstyle, 'PDFstyle.css')}" />
        <style type="text/css">
            @page {
            size: A4;
            margin: 25mm;
            padding-top: 14mm;
            }
            body { font-family: Arial Unicode MS; }
            font { font-family: Arial Unicode MS !important; }
            .inlineTable {
            display: inline-block;
        }
        </style>
        <!-- First Page Header -->
        <!-- Logo Center -->
        <csclmcb:PDFHeaderFooter type="header" position="center">
            <apex:outputPanel layout="block" rendered="{!!themeUseCoverPage}" style="border-bottom: 1px solid #ccc; color: {!themeColour};">
                <apex:outputPanel layout="none" rendered="{!!themeUseLetterhead}">
                    <img style="height: 30mm; width: auto;" class="logo" src="/{!themeCompanyLogo}" />
                </apex:outputPanel>
            </apex:outputPanel>
        </csclmcb:PDFHeaderFooter>
    </head>
    <body style="margin: 20px 0 0 0;">
        <div style="font-family: Arial Unicode MS;font-weight: 900; ">
            <br/>
            <br/>
            
            <!-- Start Apex form -->
            <apex:form >
                <!-- summary part -->
                <apex:outputPanel layout="none" rendered="{!!themeUseCoverPage}">
                    <table style="{'border-top: 1px solid #ccc;'}" width="100%">
                        
                    </table>
                </apex:outputPanel>
            </apex:form>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            
            <!-- All Pages Footer -->
            <csclmcb:PDFHeaderFooter type="footer" position="center">
                <div style="border-top: 1px solid #ccc; color: {!lettersColour};">
                    
                    <br/>{!themeCompanyStreet}, {!themeCompanyPostalCode}, {!themeCompanyCity} - Τηλ.: {!themeCompanyPhone} - Fax: {!themeCompanyFax}
                </div>
            </csclmcb:PDFHeaderFooter>
            <csclmcb:PDFHeaderFooter type="footer" position="center">
                <div style="border-top: 1px solid #ccc; color: {!lettersColour};"><br/><br/>&nbsp;<br/></div>
            </csclmcb:PDFHeaderFooter>
            <csclmcb:PDFHeaderFooter type="footer" position="right">
                <div style="color: {!lettersColour};"><br/>Σελίδα <span class="pageNumber"></span>/<span class="pageCount"></span><br/><br/></div>
            </csclmcb:PDFHeaderFooter>
            
            <!-- Start Content --> 
            <apex:form >
                <div style="page-break-before: always;">
                    <p class="tacTitle" style="color: {!lettersColour} font-family: Arial Unicode MS;">
                        Application Form
                    </p>
                    <div class="docPart"> 
                        <!-- Have a master Table... This will have sub-tables side by side... -->
                        <table style="border:none"  width="100%" cellspacing="0" cellpadding="0" id="table1"
                               align="center" class="masterTable">
                            <tr>
                                <td>
                                    <!-- Table on the Left... Customer's Data -->
                                    <table style="border:groove #51e04c; 2px"  width="50%" id="table2"
                                           align="left" class="customerDataTable">
                                        <tr>
                                            <td>
                                                <table style="border:none" cellspacing="0" cellpadding="0" width="100%" id="table3" 
                                                       align="left" class="customerTable">
                                                    <h1 style="color: {!lettersColour}; text-align:center; font-family: Arial Unicode MS">
                                                        Customer Data
                                                    </h1>
                                                    <tr>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Last Name<br/>
                                                            {!opp.Account.LastName}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            First Name<br/>
                                                            {!opp.Account.FirstName}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Father's Name<br/>
                                                            {!opp.Account.MiddleName}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            TIN<br/>
                                                            {!opp.Account.el_TIN__c}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            DOY<br/>
                                                            {!opp.Account.el_Doy_Name__r.Name}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            ID Card<br/>
                                                            {!opp.Account.cscrm__Passport_Number__pc}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Street-No<br/>
                                                            {!opp.Account.BillingStreet}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            City<br/>
                                                            {!opp.Account.BillingCity}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Postal Code<br/>
                                                            {!opp.Account.BillingPostalCode}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Phone<br/>
                                                            {!opp.Account.Phone}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Mobile<br/>
                                                            {!opp.Account.el_Mobile_Phone__c}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Fax<br/>
                                                            {!opp.Account.Fax}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Ε-mail<br/>
                                                            {!opp.Account.el_Email__c}
                                                        </td>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Date Of Birth<br/>
                                                            {!DAY(opp.Account.PersonBirthdate)}/{!MONTH(opp.Account.PersonBirthdate)}/
                                                            {!YEAR(opp.Account.PersonBirthdate)}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #b6e39a; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            test <br/>
                                                            {!opp.Account.el_Private_Law_Contract__pc}
                                                        </td>
                                                    </tr>
                                                    
                                                    <tr>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Company Name <br/>
                                                        </td>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px;
                                                                   font-family: Arial Unicode MS; padding: 6px; text-align: left;">
                                                            Company  <br/>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            TIN<br/>
                                                        </td>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            DOY <br/>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            Street-Number <br/> 
                                                        </td>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            City <br/>
                                                        </td>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            Postal Code <br/>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            Phone <br/>
                                                        </td>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            Mobile <br/>
                                                        </td>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            Fax <br/>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background: #75a3ff; color: {!lettersColour}; font-size: 12px; padding: 6px;
                                                                   font-family: Arial Unicode MS; text-align: left;">
                                                            Ε-mail <br/> 
                                                        </td>
                                                    </tr>
                                                    
                                                    
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                
                                    <!-- Tables on the Right side of the PDF -->
                                    <table style="border:groove #51e04c; 2px" cellspacing="0" cellpadding="0" width="50%" id="table5"
                                           class="productChoice">
                                        <tr><td>
                                            <table style="border:none" cellspacing="0" cellpadding="0" width="100%" id="table6"
                                                   class="productChoiceTable">
                                                <h1 style="color: {!lettersColour}; font-family: Arial Unicode MS; text-align:center">
                                                    Product Selection
                                                </h1>
                                                <tr>
                                                    <td style="color: {!lettersColour}; font-size: 12px; padding: 6px; text-align: left;">
                                                        <apex:repeat value="{!prodConfigWrapperList}" var="prodConf">
                                                            <p style="margin: 0; line-height: 1.5;  color: {!lettersColour}; font-weight: bold;">
                                                                {!prodConf.pc.Name}
                                                                <apex:inputCheckbox selected="true" disabled="true"/>
                                                            </p>
                                                        </apex:repeat>
                                                        <br/> </td>
                                                </tr>
                                            </table>
                                            </td>
                                        </tr>
                                    </table>
                                    
                                            
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                
               

                
                
                <!--   <div style="page-break-after: always" /> -->
                
            </apex:form>
            <!-- End Content -->
            
            
            
        </div>
    </body>
</apex:page>
3
  • You could try using SLDS grids or standard HTML div. – David Cheng Dec 20 '20 at 19:25
  • Hi David and thanks for your response. I use divs and when not rendering as PDF, everyhing is fine. However, i suppose it must be something different/more that i need to do when rendering as PDF. – Giorgos Galaios Dec 20 '20 at 20:54
  • Or even use a table with one row and two columns, with one of your other tables in each. – Phil W Dec 20 '20 at 20:55
3

This is getting a bit cross-discipline, as this is primarily a html/css/layout issue.

I'll skip going over details about the "box model". In short, tags get rendered as boxes. From outside to inside, you have margin, border, padding, and content. "width", by default, specifies the content area only. With the alternative box model, the one Internet Explorer used, enabled when you use box-sizing: border-box;, the width = content + padding + border.

When you want two things side by side, using width: 50%; seems logical, but that's generally not what you want to use (and especially not what you want to use with the standard box model). You need to account for margin, border, and padding (and you want at least two of those) if you don't want your content to run off the edge of the page.

box-sizing: border-box; isn't an option here as flying saucer (the thing Salesforce uses to turn html into a pdf) can only handle CSS 2.1 and box-sizing was introduced in CSS 3.

The other thing that continues to trip people up is that newlines are not zero-width (well, any whitespace between the end of one tag and the start of the next).

<!-- This will show the boxes on different lines (newline is not zero-width) -->
<div style="display:inline-block; width: 50%; background-color: yellow;">thing 1</div>
<div style="display:inline-block; width: 50%; background-color: pink;">thing 2</div>

<!-- This will show the boxes on the same line -->
<div style="display:inline-block; width: 50%; background-color: yellow;">thing 1</div><div style="display:inline-block; width: 50%; background-color: pink;">thing 2</div>

Bottom line:

  • Make the width something like 45% to give your two boxes a bit more visual separation
  • Give each box 1% margin (left and right, i.e. margin: 0 1%;) and padding to take up most of the remaining space
    • Remember, we want div width + padding + border + margin to end up at 100% (or close to it) and left + right count separately (45% width + 1% left margin + 1% right margin + 1% left padding + 1% right padding = 49%, and then we may have a border)
  • Try not to mix units. If you're going with px, stick with px. If you're going with %, stick with % (mixing units makes it a pain to calculate things and only works as intended for that specific display width)
    • Border can't take percentages, so we just hope we can get "close enough"
  • The tag containing the two divs you want side-by-side should use white-space: nowrap; to get around that newline/whitespace issue (may or may not work as this was first defined in CSS 2.1)
1
  • Thanks Derek for your detailed answer. I will check my code again and try to resolve the issue... – Giorgos Galaios Dec 21 '20 at 19:00

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.