Question

How to center labels of file uploads and signatures.

Forms Laserfiche Laserfiche Cloud Forms Layout Designer

Updated April 13, 2023

asked on April 13, 2023 • Show version history

I am wondering how I can apply css to center labels of file uploads and signatures.

I am able to style the labels and .cf-labels, but I can't figure out how to get the labels centered.

0 0

Answer

APPROVED ANSWER SELECTED ANSWER

replied on April 13, 2023

Great! And thank you for updating the tags on your post.

In the Forms Layout Designer, most (or all) of the field components have their display set to Flex. When display is set to Flex, then we can can use align-items and justify-content to change the alignment of the components.

I just tested this in Forms Layout Designer Version 11.0.2212.30907 and it worked to center the labels above the File Upload Field(s) and the Signature Field(s).

fl-file-upload label {align-items: center; justify-content: center;}
fl-signature label {align-items: center; justify-content: center;}

2 0

Replies

replied on April 13, 2023

This should be doable - but it is going to be different based on whether you are using the "Classic Form Designer" or the "Forms Layout Designer". You didn't tag you post with which one you are using. So which one are you using?

0 0

View 1 previous reply

APPROVED ANSWER SELECTED ANSWER

replied on April 13, 2023

Great! And thank you for updating the tags on your post.

I just tested this in Forms Layout Designer Version 11.0.2212.30907 and it worked to center the labels above the File Upload Field(s) and the Signature Field(s).

fl-file-upload label {align-items: center; justify-content: center;}
fl-signature label {align-items: center; justify-content: center;}

2 0

replied on April 13, 2023

Thanks!

1 0

replied on April 13, 2023

You're very welcome.

By the way - if you're curious what the options are doing. Flex display (or Flexbox display) allows the items to be displayed as either a row or a column - and that's why CSS like text-align doesn't work in a Flexbox. justify-content: center is saying to center the item horizontally when displayed as a row, or vertically when displayed as a column. align-items: center is saying to center the item vertically when displayed as a row or horizontally when displayed as a column. Since the row is the same height as the label (or column the same width as the label) then align-items isn't really necessary, but it also doesn't hurt to have it.

1 0

replied on April 13, 2023

Could you upload a picture of what your form looks like so I could provide more accurate CSS for you?

In the meantime, the classes have changed in the layout designer. If you inspect the HTML you'll notice the labels have a new class 'field-label' and the labels are in a flexbox. In order to align the text in the center of a flexbox, you can use 'justify-content: center;'

You will want to limit the scope of this CSS to just the fields that you want centered, and that requires either adding a class to the elements you want to center. Or adjusting your CSS selectors to only work on the signature and file upload fields.

0 0

You are not allowed to follow up in this post.

Question

Question

How to center labels of file uploads and signatures.

Answer

Replies

Sign in to reply to this post.