How to resize form elements to fit PDF Page

Forms
1

Hello,
i tried to resize different elements to fit a a4 PDF Page, but never the less, everything i've tried don't have an effect to the PDF creation, with the default button or an customized button.
The only thing, that have effect at the moment is the "Scale" but this doesn't work for me.
I want to rezise the font and the padding between the different fields, to get a smaller picture.

So this is what it looks like at the moment:

image
image436×590 27.3 KB

This is the result i want :slight_smile: :
image

Here are the code snippets:
//PDF EXPORTBUTTON PUSHED
if (fd.formType === 'Display'){
fd.toolbar.buttons.push({
icon: 'Print',
class: 'btn-outline-primary',
text: 'Drucken',
click: function() {
debugger;
var opts = {
title : 'Indian Creek Observation Log',
paperSize : 'A4',
landscape : false,
multiPage : true,
scale: 0.6,
margin: {
left : '20mm',
top : '20mm',
right : '20mm',
bottom : '20mm'
}
}
fd.exportToPDF(fd.field('Title').value, opts);
}
});
}

.k-pdf-export .print-class {
font-family: "Segoe UI","Source Sans Pro",Calibri,Candara,Arial,sans-serif;
font-size: 10px;
background-color: #92D050;
box-sizing: border-box;
padding-right: 0px !important;
padding-left: 0px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

2

Hello @Claudia,

To reduce padding between rows, try using this CSS:

.k-pdf-export .row {
    margin-bottom: 5px !Important;
}
3

Hello @mnikitina,

now, looks good, but there a still a couple of points which don't want to work...
i've three grids an each grid is on a separat page when printing to PDF... didn't find out right now why.
Second one: the text with the E-Mailadress jumps in the next line, in the form it is in the same line.
There is enough space for all the information on one page :slight_smile:

image
PDF View
image
Web View

And the last one, how to hide the required mark?

Do you have additional hints for me?

Thanks in advance

4

Have you assigned a class to these grids? Do you insert a page break?

Try removing the margins for the PDF file:

margin: {
left : '20mm',
top : '20mm',
right : '20mm',
bottom : '20mm'
}

Experiment and remove all or just the right margin. Also inspect your CSS.

Try adding this CSS:

.k-pdf-export .fd-required::after {
    display: none;
}

Please see How to save SharePoint form as PDF for printing for more examples and styling suggestions.

5

There are a "print-class" assigned to the three grids:

.k-pdf-export .print-class {
font-family: "Segoe UI","Source Sans Pro",Calibri,Candara,Arial,sans-serif;
font-size: 12px;
padding-right: 7px !important;
padding-left: 7px !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

No page breaks defined...

The remove of the right margin helps...
Also
.k-pdf-export .fd-required::after {
display: none;
}
helps :+1:

For me it seems, that the dimension of the "containers" have also effect on way how it will be placed on the pdf sides...

I'm still experimenting with the information i found on the community pages and documentations

6

Addtional idea:
i have different grids in the form which are hiding depending on information.
i also add css to exclude them from the export, maybe this is the reason why it looks like?

For better understanding the screenshorts from the PDF export wiht the additional information:

image
image1161×587 52.8 KB

It Should looks like...

image
image588×629 101 KB

7

@Claudia,

How do you hide these grids? Please share the JavaScript code or CSS.

8

This is the Code for the Grids
One Grid is the "A1-Grid" the scond is the "Hinweis-Grid"

// Toggle Change Event
fd.field('RA_A1_vorhanden').$on('change',showaddtionalfield);
showaddtionalfield();

        //Show Geburtsort on Togglechange
       function showaddtionalfield() {
      // debugger;
        if(fd.field('RA_A1_vorhanden').value === 'Nein' && fd.field('A1_erforderlich').value === 'ja') {
            $('.A1-Grid').show();
            $('.Hinweis-Grid').hide();
            fd.field('RA_Geburtsort').required = true;
            $(fd.field('RA_Geburtsort').$parent.$el).show();
            fd.field('RA_Geburtsort').value = fd.field('RA_Geburtsort').value;
        }
            
        if(fd.field('RA_A1_vorhanden').value === 'Ja' && fd.field('A1_erforderlich').value === 'ja') {
            fd.field('RA_Geburtsort').required = false;
            $(fd.field('RA_Geburtsort').$parent.$el).hide();  
            $('.Hinweis-Grid').hide();
        }
        
        if(fd.field('RA_A1_vorhanden').value === 'Nein' && fd.field('A1_erforderlich').value === 'nein') {
            fd.field('RA_Geburtsort').required = false;
            $(fd.field('RA_Geburtsort').$parent.$el).hide();  
            $('.Hinweis-Grid').show();
            $('.A1-Grid').hide();
        }
       // if(fd.field('RA_A1_vorhanden').value === 'Nein' && fd.field('A1_erforderlich').value === 'ja') {
      };

CSS
.k-pdf-export .Hinweis-Grid {
display: none !important;
}

.k-pdf-export .A1-Grid {
display: none !important;
}

9

@Claudia,

I can't tell what's wrong and couldn't reproduce the same behavior on my form.

Try commenting out all the custom CSS and JS related to PDF export and see how the form exports. Does it break into pages the same way? How are hidden grids displayed?

10

@mnikitina

it doesn't matter what i change, breaks always the same way...
Here the three results as PDF:
NOPDFextraCode.pdf (35.0 KB)
OnlyJSCode.pdf (33.2 KB)
WithallCode.pdf (33.2 KB)

Should i send you the the projectfile?

11

@Claudia,

Yes, please export the form and share it with me.

12

@Claudia,

Thank you for the form export! What version of SharePoint and Plumsail Forms designer are you using?

13

Plumsail Forms 1.8.7
Sharepoint Server 2019

14

@Claudia,

I can only suggest placing all fields and form elements outside the grid containers. I think it can help resolve the case with page breaks.