Question

Field Size with Form Designer

Forms

Updated October 17, 2024

asked on October 17, 2024

Can someone point me to information on how to change the field size for single line fields in the Form Designer? With Classic Designer you can just select small/medium/large, but I am not seeing any such option other than on the upload field types, and have been unsuccessful finding information on that. Thank you!

0 0

Replies

replied on October 17, 2024 • Show version history

The sizing is done by adding additional fields to the side of your existing field and then dragging the border between the fields to resize them.

I sometimes find that I need to have a field with white space to the side of it, so I'll add a Custom HTML Element to the side of the regular field, and then clear the contents of the Custom HTML Element so that it is blank. Then I can resize the two items as needed to make my field only use up part of the form width.

It's a bit of a learning curve coming from the Classic designer, but once you are used to it, you'll likely find it much easier to work with.

3 0

replied on October 17, 2024

Sheesh. Once you said that.. I saw that. I was actually working with a table so there were multiple single lines to work with. Thank you

0 0

replied on October 17, 2024 • Show version history

You can also resize fields by applying a custom CSS class to them under the "Advanced" tab, and then using basic CSS.

For example, you could assign the class "singleline" to your single line field(s), and then use the following code:

.singleline {width: 100px;}

.singleline {width: 50%}

(Those are just quick examples, let me know if you need more help and I can try to assist as best as I can.)

Sorry, adding to this - If you're wanting to adjust all single line fields on your form, you can just use .single-line as a built in class (without having to add a custom class).

1 0

View 1 previous reply

replied on October 17, 2024

No problem at all!

0 0

replied on October 17, 2024

That's great to consider that I can just set all of the fields to the same size. I learned much with this question! :)

0 0

replied on October 17, 2024

Perfect! Happy to help! :)

You can also set min-width and max-width in the same way; I saw below that you're working with a table so I thought I'd mention that too, since they can get a bit squishy.

1 0

replied on October 17, 2024

These are elements that I add to the CSS of the form - then I use them to adjust the width of the field

.inline50 {display:inline-block;width:50%!important;} 
.inline30 {display:inline-block;width:30%!important;} 
.inline33 {display:inline-block;width:33%!important;} 
.inline25 {display:inline-block;width:25%!important;} 
.inline20 {display:inline-block;width:20%!important;}

then on the Advanced tab of the field on the CSS you just add inline50 to make the field use 50% of the page width.

1 0

replied on October 17, 2024

Thank you! This will be helpful!

0 0

You are not allowed to follow up in this post.

Question

Question

Field Size with Form Designer

Replies

Sign in to reply to this post.