Styling of Display form

[vegard.grutle]

Hi,

I am currently working with a display form which is to be printed to PDF / printer.

I would like to work with the style of the form. Is it possibe to include some CSS code to produce something like the attached picture?

Thansks!

Capture.PNG (17.21 KiB) Viewed 4827 times

[Nikita Kurguzov]

Hello, Vegard!
Yes, it is possible to attach CSS code to change the look of the form and it should affect the PDF as well. Though some of the formatting might not show up when converted, as some of it is not applied to PDF, e.g. custom fonts wouldn't show.

[vegard.grutle]

Hi, thanks fory your promt answer.

To be more specific; Is it possible to only apply CSS to the Title and not the control as illustrated in the picture?

Also, when i include simple CSS to the form (example given below) it is not picked up when converting /printing to PDF

Code: Select all

.body {
    background-color: lightblue;
}

Thanks!

[Nikita Kurguzov]

So, what you want to achieve is best done using a Table. Just add a table to your form, move your fields inside, select Title -> Visibility: Collapsed, that would hide the titles:

VisibilityCollapsed.png (4.29 KiB) Viewed 4815 times

In the table on the left, add Plain text elements and make them look like the titles. You can manipulate Table Cell padding and width, as well as element's layout - width, wrapping, etc.

Add custom CSS classes to the Table cells and it should work, even when converted to PDF as well.

[vegard.grutle]

Hi,

Thanks for the tip!

[vegard.grutle]

Hi, again!

Further to the above, the CSS classes (background) used on the display form would not work on the Print form functionality, Borders are OK. The CSS styling is working smoothly on the display form.

Any thoughts?

Vegard

[Nikita Kurguzov]

Hello!
Are you using Google Chrome by any chance? The browser might be stripping the colors from the form.
You can try adding this line to the CSS Editor:

Code: Select all

* { -webkit-print-color-adjust: exact; }

[vegard.grutle]

Hi, I'm using IE 11. Have incerted the line but notting happened.

[Nikita Kurguzov]

This line will only work with Google Chrome and Safari. As it is, I highly recommend trying out your form in Chrome, since I have personally tested it and it works, but different browsers have certain quirks when it comes to Printing which are not restricted to Forms Designer.