0

My issue is table content overlap in second page please guide me to increase header height

enter image description here

========================== My issue is table content overlap in second page please guide me to increase header height

enter image description here

==========================

<apex:page StandardController="Estimate__c" renderAs="pdf" applyBodyTag="false" extensions="EstimatePDFController">
  <head>
    <style type="text/css" media="print">
      @page {
        @top-center {
          content: element(header);
        }

        @bottom-left {
          content: element(footer);
        }
      }

      div.header {
        padding: 10px;
        text-align: unset;
        position: running(header);
      }

      div.footer {
        display: block;
        padding: 5px;
        position: running(footer);
      }

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

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

      @page :first {
        @bottom-left {
          /* Nothing */
        }

        @top-center {}
      }

      #box {
        width: 749px;
        height: 945px;
        align: center;
      }

      #box img {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      #box div {
        position: absolute;
        width: 100%;
        height: 100%;
        color: #000;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="header" style="padding-bottom:30px;">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <span style="text-align:left!important;">
              <apex:image url="{!$Resource.MavenLOGO}" width="110" height="30" />
               
            </span>
          </td>
          <td style="text-align:right;">
            <span style="font-family: Montserrat, sans-serif;text-align:right;"> Estimate Number: {!Estimate.Name} | V - {!Estimate.Revision__c} </span>
          </td>
        </tr>
            
      </table>
    </div>
    <div class="footer">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" style="">
        <tr>
          <td width="10%">Page: <span style="font-family: Montserrat, sans-serif;" class="pagenumber" /></td>
        </tr>
      </table>
    </div>
    <div id="box">
      <div style="page-break-after: always;" />
    <table width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family: Montserrat, sans-serif!important;">
      <tr>
        <td height="30" colspan="2"></td>
      </tr>
      <tr>
        <td colspan="2">
          <h1 style="font-family: Montserrat, sans-serif; color:#fff; font-size:20px;text-align:left;background-color: #f39c12;padding: 10px 10px 10px 30px;width:50%;">SCOPE OF WORK</h1>
        </td>
      </tr>
      <tr>
        <td height="15" colspan="2"></td>
      </tr>
      <tr>
        <td height="28" colspan="2">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <apex:variable value="{!0}" var="rowNum" />
            <tr>
              <td width="5%" height="28" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px;border: 1px solid #ccc;background-color:#0f1c43">
                <strong style="padding-left:5px; color:#fff;">#</strong>
              </td>
              <td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; border: 1px solid #ccc;background-color:#0f1c43">
                <strong style="padding-left:5px;color:#fff;">Document / Activity </strong>
              </td>
              <td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; border: 1px solid #ccc;background-color:#0f1c43">
                <strong style="padding-left:5px;color:#fff;">Responsibility</strong>
              </td>
              <td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; border: 1px solid #ccc;background-color:#0f1c43">
                <strong style="padding-left:5px;color:#fff;">Responsibility of Manufacturer </strong>
              </td>
            </tr>
            <apex:variable var="s_no" value="{!1}" />
            <apex:repeat value="{!ScopeofWork}" var="sow1">
              <apex:repeat value="{!ScopeofWork}" var="sow">
                <apex:outputPanel rendered="{!sow.SR_No__c== s_no}" layout="none">
                  <tr>
                    <td width="5%" height="28" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; padding: 10px 4px 4px 0px;border: 1px solid #ccc;">
                      <span style="padding-left:5px;"> {!sow.SR_No__c} </span>
                    </td>
                    <td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; padding: 10px 4px 4px 0px;border: 1px solid #ccc;">
                      <table>
                        <tr>
                          <td style="padding-left:5px;">
                            <strong style="color: #535353;">
                              <apex:outputField value="{!sow.Name}" />
                            </strong>
                          </td>
                        </tr>
                      </table>
                    </td>
                    <td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; padding: 10px 4px 4px 0px;border: 1px solid #ccc;">
                      <span style="padding-left:5px;">
                        <apex:outputField value="{!sow.Responsibility_of_Maven__c}" />
                      </span>
                    </td>
                    <td width="31%" align="left" style="font-family: Montserrat, sans-serif; font-size: 13px; padding: 10px 4px 4px 0px;border: 1px solid #ccc;">
                      <table>
                        <tr>
                          <td style="padding-left:5px;">
                            <span>
                              <apex:outputField value="{!sow.Responsibility_of_Manufacturer__c}" />
                            </span>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </apex:outputPanel>
              </apex:repeat>
              <apex:variable var="s_no" value="{!s_no+1}" />
            </apex:repeat>
          </table>
        </td>
      </tr>
     
      <div style="page-break-after: always;" />
    </table>
    </div>
      
  </body>
  <!-- End Default Content REMOVE THIS -->
</apex:page>
2
  • Seems to me like you need to use page-break in your css.
    – Derek F
    Mar 25, 2023 at 23:24
  • Can you please specify how to do Mar 28, 2023 at 5:14

0

You must log in to answer this question.

Browse other questions tagged .