[Forms] Trim White Space at the Bottom of Each Page Saved to the Repository

asked on April 25

When a particular form was saved to the repository the natural page break happened to fall exactly where a radio button would be located. It appeared to be cause the radio button to not be saved. It should appear in the red box.

The form is using pagination (tabs) so we worked around this by using the following CSS to create cleaner page breaks which did solve the problem.

.form-pages-container div.Page { page-break-after: always; }

Unfortunately, this has introduced a lot of excess white space at the end of each section so someone viewing the form saved to the repository has to scroll quite a bit to make it all the way through.

Does anyone know any CSS magic that could trim the white space at the end of each page?

We are currently on LF11 Update 5 and using the modern designer though we will be upgrading to LF12 in July 2025.

0 0

APPROVED ANSWER SELECTED ANSWER

replied on April 25

Instead of forcing page breaks, you can add a class to content that you do not want to be split by a page break. In this case, just add the class "keepTogether". I do this myself by putting content I do not wish to be split inside of sections that do not have a visible label.

.keepTogether,
.cf-table-block,
.form-q {
  page-break-inside: avoid;
}

5 0

replied on April 29

This turned out to be very valuable advice as on a different form the radio-button box was so large that it would span a page break regardless and was chopping off the last 2-3 lines when saved to the repository.

Using the .keepTogether CSS forced it to appear on a page by itself which preserved the bottom lines.

Thanks!

1 0

Question

Question

[Forms] Trim White Space at the Bottom of Each Page Saved to the Repository

Answer

Replies

Sign in to reply to this post.