Classic vs Modern Designer - Field Sizes

asked on December 4, 2024 • Show version history

I am really trying to get on board with the modern form designer. I have many active forms that I'd like to convert. Because I am using a lot of CSS and JS on the forms created in the classic designer, a lot of formatting goes away. Dragging the fields side-by-side is nice, because I can quickly correct those issues. Some others are not so easy, at least with the update we are currently on and which we will be staying with until we upgrade to 12 late next year.

I have the need to hide a submit button on an existing form (classic) and all JS I've tried fails for this particular situation. Here is a link to that post: https://answers.laserfiche.com/questions/225550/Hide-submit-on-form-if-hidden-field-is-blank--Classic-Designer#225552 Testing in the modern forms designer using rules works great, further encouraging me to convert my forms to the MFD. So, I converted this form, and now all the nicely sized fields I had set up are back to being the full width of the form. I know that with the modern designer you can still use CSS to customize the width of fields (so I could go in and do this for each one I want to be smaller ... uggh), but the classic to modern comparison documentation says that you can drag to resize the height or width of fields. I can't find a way to do this and it feels like a step backwards since the classic designer allowed small/medium/large/x-large options for quickly sizing the width of a field (and those options are gone). Is this drag to resize an option only in a version of Forms higher than 11.0.2307.40547? It seems that the convenient field masking is only available in versions of 11 higher than this so I have a feeling I'm facing the same with this situation as no matter where I place my mouse, dragging to resize width does not seem to happen.

0 0

replied on December 4, 2024

Vikki, the resizing of fields in the Modern Designer can be done by simply dragging the side of the field to the width you want. To my knowledge you are not able to resize the height in the same way. Below is an example of how to do it. I would make sure you have arranged your fields how you want them before resizing, since once you add another field to the row it will resize everything again. I hope this helps.

2 0

View 5 previous replies

replied on December 4, 2024

I should have been more clear, the fields that are side-by-side, I can. The fields that are not, I can't. See the first image below, aside from CSS, how can I make the Total Income and Effective Gross Income fields that size in the MFD? In the MFD it converts them to the full width of the form, second image.

1 0

replied on December 4, 2024

Ah, for those add a custom html field next to them and just delete all the text from it and then resize it as you like.

0 0

replied on December 4, 2024

I could, yes. I feel it would be just as easy to apply CSS to each of them. I think the ability to resize any field the way you can if they are side-by-side would be nice. It is cumbersome when you have so many forms and the forms have so many fields like the example just shown. Not sure why the small/med/large/x-large options were removed? Not only would it be great if they were there, but even better if they "stuck" upon conversion to the MFD. I suppose it really needs to be a feature request to drag and resize ALL fields. Thanks for responding, at least now I don't feel like I'm just missing a way to do this.

0 0

replied on December 4, 2024

I always add this CSS to my forms and just use CSS to format field width for a single field on a line

.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;}

3 0

replied on December 4, 2024

@████████'s answer is correct. Right now there isn't a way to resize a field without CSS when it is the only field in a row. I will add this to my field resizing feature I am building where I think it'd be really nice to not only allow this but actually have better support for "snapping" to some breakpoints like described in this CSS

1 0

replied on December 4, 2024

@████████ Another fantastic thing would be to add back the feature to allow the spacing between lines to be altered. I had reduced the spacing in all the forms using that quick option in Themes. Now the option is gone and none of the CSS I've tried to force padding change is working. Our repository users like the forms nice and compact, with fewer number of pages, and I feel that it provides a better experience for the form submitters as well.

0 0

replied on December 4, 2024

I added that as well, for now this CSS works for me. Note the !important flag is needed since padding on fields is added as a style and not CSS.

.fl-component {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

3 0

replied on December 4, 2024

@████████Excellent! This worked.

0 0

Question

Question

Classic vs Modern Designer - Field Sizes

Replies

Sign in to reply to this post.