Printing the Edit form

Forms
1

We have a fault tracking system, items are updated by the office and then printed to be given out.

The easiest and quickest way to print the form is with Ctrl+P. We print up to 150 a day, so the PDF route is too slow for everyday use.

However, I'm having difficulty formatting the form for printing.

Is there a way to hide the boxes around the controls? The lines between fields should be there, but I'd like to hide the boxes around 'sockets', 'Electrical', 'Activity Centre', etc.

And I can change the font size of the displayed info in text fields (eg Room No/Name), but "Fault Location" is a drop-down, and the font size setting doesn't affect the size of the displayed/printed selection. Is there any way to change the font size of the selected option?

As designed:
image

Display/print:
image

2

Hello @njones,

You can use the below CSS to hide the input borders.

.fd-form input.form-control, .k-autocomplete, .k-dateinput-wrap, .k-dropdown-wrap, .k-picker-wrap, .k-multiselect-wrap, .k-numeric-wrap {
    border-style: none !important;
}

If you want to apply styling only for PDF document, you need to add .k-pdf-export. For example, if you want to hide the arrow in the drop-down fields image in PDF file use this CSS:

.k-pdf-export .k-dropdown .k-select {
    visibility: hidden;
}

Please find more information about styling the PDF document in Export any form to PDF article.

And to change the font size of the drop-down controls, please use the following CSS:

.k-input {
    font-size: 20px !important;
}
3

Hi mnikitina

Thanks :smile:

That's worked on all of the fields but I've added a multiline text box and that's still showing the box, is there another css code for that?

4

@njones,

You are welcome!
To hide the border of the multiline text field please use this CSS:

textarea.form-control.fd-textarea, table.k-widget.k-editor.k-header.k-editor-widget.k-resizable {
    border-style: none;
}
1 Like
5

That worked, thank you mnikitina

One last thing - I'm trying to make the selected item in Fault Location (a dropdown) print out in a larger font, but none of the settings I've tried seem to work. I've set the font size the same as Room No/Name (text) but when printed Fault Location is the normal size while Room is the correct large font size.

Is there a way to force the dropdown selection to print larger?

6

@njones,

Is it a drop-down field or a lookup?
Have you added this CSS in the form?

.k-input {
    font-size: 20px !important;
}
1 Like
7

Thanks mnikitina

It's a drop-down. That's worked fine, but all the other drop-downs on the form have also had the font size increased. Is there any way to target just one of them?

8

@njones,

Yes, for this you need to assign a CSS class in the field Settings >> CSS class, e.g. change-font.
image

And use this CSS:

.change-font, .change-font span.k-input {
    font-size: 20px !important;
}
1 Like