You are viewing limited content. For full access, please sign in.

Question

Question

How to increase font size on saved form

asked on January 17, 2024

Is there a way to increase the font size of field entries on saved forms?

I know how to make the font larger for the fields at time of entry, but they all revert back to a smaller font when the form is saved to the repository.  I need a larger font on the saved forms in the repository  on certain documents for printing purposes.

See examples of entry screen vs. what the saved document looks like.  (Forms 11, Save to repository task, saving as Tiff)

Entry Screen.png
Saved Form.png
Entry Screen.png (12.29 KB)
Saved Form.png (22.48 KB)
0 0

Answer

SELECTED ANSWER
replied on January 18, 2024 Show version history

Like the second example I provided, just replace "myField" with your class name.

If you're new to CSS, I recommend checking out the following to get an idea of the different types of selectors and how hierarchy and specificity apply.

CSS Selectors Reference (w3schools.com)

1 0

Replies

replied on January 18, 2024

What are you using to control font size?

There should be theme settings to control the font size of the field values.

However, if you're using custom CSS it may not be working because different html element types are used on stored forms versus interactive ones.

 

0 0
replied on January 18, 2024

I am using CSS to increase the field value size at entry as there is no setting in theme/styles (in new designer) for the field value.  The only settings I'm seeing are label text, body text, text above/below field ant tool tip.

I don't really need the font to be larger at time of entry.  I just need it to be larger on the saved form.

Style.png
Style.png (26.79 KB)
0 0
replied on January 18, 2024 Show version history

What CSS exactly are you using? If you want to adjust the size on the saved copy only, then you need to use CSS selectors that work with that formatting.

For example, when a form is read only or saved to a repository, the input elements are all converted to non-interactive display elements like div and span.

If your CSS is something like

.myField input

It won't work because the display version is not an input element

Instead, you would use something more like

.myField .cf-field > div

 

The structure of the new forms is substantially different so it may take some trial and error to get the desired effect, but if you create a User Task, mark it as read only (in the user task settings, not the form itself) then it will display a version more similar to the saved copy.

You can then start a test instance and assign that task to yourself to inspect the html structure of the "display only" version and test the CSS.

0 0
replied on January 18, 2024

This is the CSS I'm using on one field which has CSS Class of lgFont: 

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

How should I write it for the display version?

0 0
SELECTED ANSWER
replied on January 18, 2024 Show version history

Like the second example I provided, just replace "myField" with your class name.

If you're new to CSS, I recommend checking out the following to get an idea of the different types of selectors and how hierarchy and specificity apply.

CSS Selectors Reference (w3schools.com)

1 0
replied on January 18, 2024

Thanks so much!  I will give this a try and check out your recommendation as well.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.