I have created a pdf template with a table.
The table has a border; after rendering all the data, the content covers only half of the page, so the table border covers only the content.
But I want the table border to cover the entire page regardless of the height of the content, like this:
- I have tried to set height of table to 100%, but no luck.
- I have also tried to put
block-progression-dimension.optimum="100%"
on last table cell; let me know if that's the right place
<fo:page-sequence master-reference="A4-portrait">
<fo:flow flow-name="xsl-region-body">
<fo:block font-size="14pt" margin-bottom="11pt" height="100%">
<fo:table border-width="1pt" border-style="solid" height="100%" border-color="grey" margin-top="-110pt" font-family="Gotham Narrow A, Gotham Narrow B, Helvetica, Arial, sans-serif">
<fo:table-body>
<fo:table-row>
<fo:table-cell number-columns-spanned="2" margin-left="20pt">
<fo:block text-align="left" font-weight="bold" font-size="13pt" color="black" margin-bottom="2pt" margin-top="15pt" margin-left="-5pt">
${ctx.messages.repairInstructionTitle}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairInstructionMessage1}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairInstructionMessage2}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairInstructionMessage3}
</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row>
<fo:table-cell>
<fo:table margin-top="10pt" margin-bottom="15pt">
<fo:table-column column-width="50%"/>
<fo:table-column column-width="50%"/>
<fo:table-body>
<fo:table-row>
#if ($ctx.orderData.deliveryAddress.country.isocode == 'US')
<fo:table-cell margin-left="30pt" number-columns-spanned="1">
<fo:block text-align="left" font-weight="bold" font-size="9pt" color="black">
${ctx.messages.repairQuestionForLocationMainland}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.mauijimIncMainland}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairDepartmentLable}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairDepartmentMainlandAddressLine1}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairDepartmentMainlandAddressLine2}
</fo:block>
</fo:table-cell>
<fo:table-cell margin-left="20pt">
<fo:block text-align="left" font-weight="bold" font-size="9pt" color="black">
${ctx.messages.repairQuestionForLocationHawaii}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.mauijimIncHawaii}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairDepartmentLable}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairDepartmentHawaiiAddressLine1}
</fo:block>
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairDepartmentHawaiiAddressLine2}
</fo:block>
</fo:table-cell>
#end
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:table-cell>
</fo:table-row>
<fo:table-row>
<fo:table-cell margin-left="15pt" block-progression-dimension.optimum="100%">
<fo:block text-align="left" font-size="13pt" color="black" font-weight="bold">
${ctx.messages.repairAnyQuestionText}
</fo:block>
#if (${ctx.orderData.deliveryAddress.country.isocode} == 'US')
<fo:block text-align="left" font-size="9pt" color="black">
${ctx.messages.repairContactInfo}
</fo:block>
#end
#if (${ctx.orderData.deliveryAddress.country.isocode} != 'US')
<fo:block text-align="left" font-size="9pt" color="black">
#set($repairContactInfo = "repairContactInfo")
#set($isocode = $ctx.orderData.deliveryAddress.country.isocode )
#set($addMessage = "$repairContactInfo$isocode")
${ctx.messages.getMessage($addMessage)}
</fo:block>
#end
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block>
</fo:flow>
</fo:page-sequence>
I am not sure what effect you are trying to achieve. The
height="100%"
on thefo:table
makes it 100% of the height of its containing block, but thefo:block
hasmargin-bottom="11pt"
, which reduces the height available for thefo:block
and, therefore, for thefo:table
.The
height="100%"
gives the table a fixed height, but themargin-top="-110pt"
shifts the table up by 110pt so that I'm currently seeing 110pt of blank space after the table.If you want something really is 100% of the page height, use
height="100pvh"
. See https://www.antenna.co.jp/AHF/help/en/ahf-ext.html#pvh(Also,
margin-left
does not apply tofo:table-cell
.)