PDF exports incorrectly rendering automatic page break

Forms
1

Hello all,

I've got a custom Sharepoint form setup with an Export to PDF option as shown in the documentation. Everything works as expected, except for automatic page breaks. The page is breaking about halfway down the page, leaving the bottom half of the page blank.

I don't have enough technical knowledge to diagnose the issue but from what I've gathered looking around online, it seems to have something to do with the font size of the document. I have custom font sizes set on .k-pdf-export, some things are 12px, some 9px.

One thing I read said it has something to do with font sizes only being applied to the document after the automatic page breaks are calculated, so it doesn't factor in the true size of the rendered content when calculating the page breaks.

JS here:

fd.spRendered(function () {
//add new Print PDF button
    fd.toolbar.buttons.push({
        icon: 'PDF',
        class: 'btn-outline-primary',
        text: 'Print PDF',
        click: function() {
            fd.exportToPDF('Comeback Form', {
                paperSize: 'Letter',
                margin: '5mm',
                landscape: false,
                template: $('#page-template').html()
            });
        }
    });
});

CSS here:

/*hide input borders*/
.k-pdf-export span.k-dropdown-wrap.k-state-default,
.k-pdf-export .fd-form input.form-control {
    border: none !important;
}

.k-pdf-export span.k-select {
    display: none !important;
}

.k-pdf-export > * { 
    line-height: 1;
    text-align: left;
    text-justify: none !important;
}

.k-pdf-export .fd-field-title {
    font-weight: bold;
    font-size: 9px;
    padding: 0px;
    color: #234d70;
}

.k-pdf-export .fd-field-control {
    font-size: 12px;
    text-align: left;
    text-justify: none !important;
    font-family: 'DejaVu Sans', 'Arial', sans-serif !important;
}
    
    
.form-hide {
    display: none !important;
}

.k-pdf-export .form-hide {
    display: contents !important;
}

/*apply DejaVu Sans font to the content*/
.k-pdf-export {
    font-family: 'DejaVu Sans', 'Arial', sans-serif !important;
    font-size: 12px;
}

.fd-toolbar-side-commands {
    display: none !important;
}

.k-pdf-export .fd-form .form-group{
  margin-bottom: 0px!important;
}

[class*="mb-3"] {
  margin-bottom: 0px!important
}

.k-pdf-export [class*="mb-3"] {
  margin-bottom: 0px!important
}

.page-template > * {
    position: absolute;
    left: 20px;
    right: 20px;
    font-size: 90%;
}

.page-template .header {
    top: 20px;
    border-bottom: 1px solid #000;
}
.page-template .footer {
    bottom: 20px;
    border-top: 1px solid #000;
}

/*declair DejaVu Sans font*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('https://kendo.cdn.telerik.com/2020.1.406/styles/fonts/DejaVu/DejaVuSans.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVu Sans';
    font-weight: bold;
    src: url('https://kendo.cdn.telerik.com/2020.1.406/styles/fonts/DejaVu/DejaVuSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVu Sans';
    font-style: italic;
    src: url('https://kendo.cdn.telerik.com/2020.1.406/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf') format('truetype');
}

@font-face {
    font-family: 'DejaVu Sans';
    font-weight: bold;
    font-style: italic;
    src: url('https://kendo.cdn.telerik.com/2020.1.406/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf') format('truetype');
}

Can anyone please help a complete novice? :smile:

2

Dear @Alex548,
You're using the force page break option, right?

fd.pdfOptions = {
    paperSize: 'A4',
    margin: '5 mm',
    forcePageBreak: '.page-break'
};

Have you tried adjusting the font size, at least to see if it's what's causing the issue? You can try without changing the font size, for example, or try different font sizes to see what the effects are.