1

I've inherited a visualforce page that generates a PDF. The output isn't very useful in it's current state, so I've been asked to format the columns to the last column (the text box of activities) is most of the row. However, when I try to adjust the column widths (in the TBODY section), nothing appears to change on the PDF. The syntax is different from my standard usage, so can't tell if that's the underlying issue, or I'm just missing something.

<apex:page standardController="Engagement__c" extensions="SL_ctrl_Contact_Summary_Report" renderAs="pdf" sidebar="false" showheader="false" standardStylesheets="false" applyBodyTag="false">
<head>
    <style type="text/css">
        html, body, form{margin: 0;padding: 0;}
        body {
            font-family: Calibri, Candara, Arial, sans-serif;
            font-size: 8pt;
        }

        @page {
            size: landscape;

            margin: 0.3cm;
            margin-bottom: 20px;
            margin-top: 50px;

            @bottom-right {     
                content: "Page " counter(page) " of " counter(pages);
            }

            @bottom-left {
                content: "CONFIDENTIAL";
            }

            @top-right {
                content: element(page_header_date);
                padding-top: 20px;
                margin-bottom: 140px;
            }

            @top-center {
                width: 100%;
                content: element(page_header);
                text-align: center;
                margin-bottom: 120px;

            }

        }

        div.footer {
              text-align: right;
              position: running(footer);
              display: block;
        }

        div.page_header {
              position: running(page_header);
              display: block-inline;
        }

        div.page_header_date {
            text-align: right;
            position: running(page_header_date);
            display: block-inline;
        }

        .headerStyle {
        }

        .pagenumber:before {
              content: counter(page);
        }
        .pagecount:before {
              content: counter(pages);
        }

        .firstpagehead  {font-size: 120%; }
        .pagenum  {font-size: 110%; }


        table {
            width: 100%;
            font-family: serif;
            border-collapse: collapse;
            -fs-table-paginate: paginate;
            border:none;
        }
        thead {display: table-header-group;}

        tr { page-break-inside: avoid; }

        tr.border_bottom td {
            border-bottom:1px solid black;
        }

        tr.border_bottom th {
            border-bottom:1px solid black;
        }

        .repeat_data {
            widows:2;
            page-break-inside: avoid !important;
            page-break-after: auto;
            background-repeat: repeat-y;
        }

        table.tab_inner_field {
            border-bottom:0;
            border-collapse: collapse;
            -fs-table-paginate: paginate;
            border:none;
        }
        th.tab_inner_field {
            border-bottom:0;
        }
        td.tab_inner_field {
            border-bottom:0;
        }
        thead.tab_inner_field {
            border-bottom:0;
            display: table-header-group;
        }

            @media print {
                table tr td {
                    page-break-inside: avoid !important;
                    widows:1;
                }
            }

    </style>
</head>
<body>

    <div class="footer">
      <p class="pagenum">Page <span class="pagenumber"/> of <span class="pagecount"/></p>
    </div>  


<div class="page_header">
        <div style="width:90%;text-align:center; font-size:14pt;"><b>{!EngagementName}</b></div>
        <div style="width:90%; text-align:center; font-size:14pt;">Contact Summary report</div>
</div>

<div class="page_header_date">
        <apex:outputText value="{0,date,M/d/yyyy}">
            <apex:param value="{!NOW()}" />
        </apex:outputText>
</div>      


                <apex:outputpanel rendered="{!listWrapperParty != NULL && listWrapperParty.size >0 }" >


<apex:form >

     <table id="theTable" border="0" width="100%" cellpadding="0" cellspacing="1" class="tabreport">
        <THEAD>
           <tr class="border_bottom">
              <th><div style="padding-right:4px;padding-top:0;margin-top:0;padding-bottom:1px;">Party Type</div></th>
              <th><div style="padding-left:4px;padding-right:4px;padding-top:0;margin-top:0;padding-bottom:1px;">Priority</div></th>

              <th><div style="padding-left:4px;padding-right:2px;padding-top:0;margin-top:0;padding-bottom:1px;">Primary Banker</div></th>

              <th><div style="padding-left:4px;padding-right:4px;padding-top:0;margin-top:0;padding-bottom:1px;">Party Name</div></th>
              <th><div style="padding-left:1px;padding-top:0;margin-top:0;padding-bottom:1px;">Party Contacts</div></th>
              <th><div style="padding-left:1px;padding-top:0;margin-top:0;padding-bottom:1px;">Material Events</div></th>
              <th><div style="padding-left:1px;padding-top:0;margin-top:0;padding-bottom:1px;">Activities</div></th>
           </tr>
        </THEAD>

        <TFOOT>
        </TFOOT>

        <TBODY>

            <apex:repeat value="{!listWrapperParty}" var="varParty">
              <tr class="border_bottom">
                 <td style="vertical-align:top;width:5%;" class="repeat_data">
                    <apex:outputText value="{!varParty.Party_Type}"/>
                 </td>
                 <td style="vertical-align:top;text-align:center;width:5%;">
                    <apex:outputText value="{!varParty.Priority}"/>
                 </td>

                 <td style="vertical-align:top;text-align:left;width:10%">
                    <apex:outputText value="{!varParty.Primary_Banker}"/>
                 </td>

                 <td style="vertical-align:top;width:5%;" class="repeat_data">
                    <apex:outputlink value="/{!varParty.strEngagementId}" styleClass="repeat_data">{!varParty.Company_Name}</apex:outputlink>
                 </td>

                 <td style="vertical-align:top;width:5%;">
                            <apex:repeat value="{!varParty.Party_Contacts_list}" var="Party_Contact">
                                <apex:outputText value="{!Party_Contact}" escape="false" />
                            </apex:repeat>
                 </td>

                 <td style="vertical-align:top;width:20%;">
                    <apex:outputText value="{!varParty.Material_Events}" escape="false" />
                 </td>
                 <td style="vertical-align:top;width:50%">
                    <apex:outputText value="{!varParty.Activities}" escape="false" />
                 </td>

              </tr>
            </apex:repeat>

        </TBODY>
     </table>


 </apex:form>

                </apex:outputpanel>

</body> 
</apex:page>
1

It appears as though you're trying to use inline styling in <TBody> to control the column width via the <td> tags in the lines like the one below and those that follow it.

<td style="vertical-align:top;width:5%;" class="repeat_data">
    <apex:outputText value="{!varParty.Party_Type}"/>
</td>

The width of those columns are actually controlled by the CSS and HTML tags in the lines underneath the <THEAD> tag (Table Header) like what's below and the lines that follow it.

 <th><div style="padding-right:4px;padding-top:0;margin-top:0;padding-bottom:1px;">Party Type</div></th>

It's in the above <th> tags that you'll need to make your inlinr adjustments. You could also do it by modifying the section of CSS somewhere in the area shown below to specify widths for each of the <th> tags in the <THEAD> section as in thead.th1, thead.th2, etc.

   thead {display: table-header-group;}

    tr { page-break-inside: avoid; }
| improve this answer | |
  • facepalm You, my friend, are a gentleman and a scholar. Thanks @crmprogdev – HomerJ Jul 3 '15 at 12:59
  • facepalm accepted. Check the CSS 2.1 reference on the exact syntax to use if you go the CSS route. It may fall under tr1.th1, tr1.th2, etc. I didn't have time to look and the grey matter is a bit overloaded at the moment. ;) – crmprogdev Jul 3 '15 at 13:04

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.