Question

Government

How can I resize the input date to full size?

Laserfiche Forms Layout Designer

Updated December 21, 2023

asked on December 20, 2023

Hello Team,

I'm currently attempting to resize the date input to occupy the entire width, but unfortunately, I'm encountering difficulties. Here's how it currently appears:

And this is the code I am using to put 2 input date in the same row:

/*Displays two fields per line*/
.TwoPerLine{display: inline-block; width:50%;}
.TwoPerLine .cf-medium {width:100%;}

Thanks in advance

0 0

Replies

replied on December 20, 2023

Check the width setting in the individual field settings.

Whenever you use the TwoPerLine type styling to manually adjust the width of the fields, it is best to set fields to X-Large so they will fill the available space better without requiring extra CSS.

To explain, in the classic designer the small, medium, large, and x-large settings determine field size based on a percentage of the parent.

The classic designer wasn't originally intended for side-by-side fields, so under normal circumstances the parent is ~100% of the form width and this setting controls field sizes.

To put fields side by side, you have to change the width of the parent element, which in turn affects the size of the contained field because it is percentage based.

The x-large option uses the highest percentage; manually setting a width is also possible but more complex because if you set it to 100% it would cause issues with the datepicker icon/button.

1 0

replied on December 21, 2023 • Show version history

Looks like you are using the older designer. You can use the on board bootstrap CSS. It is split into 12 segments, so if you want two large fields add "col-sm-6" to the css.

1 0

replied on December 21, 2023

The bootstrap classes would work for controlling the width of the parent container, but this post was referring to the size of the actual input field/element.

1 0

replied on December 20, 2023

Beautiful! thank you!

0 0

You are not allowed to follow up in this post.

Question

Question

How can I resize the input date to full size?

Replies

Sign in to reply to this post.