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

Discussion

Discussion

How to Bottom align fields in the Modern Designer.

Forms Web Customizations Forms Layout Designer Laserfiche Cloud
Updated October 18, 2023
posted on October 17, 2023 • Show version history

I have a case where some of the fields that sit side by side in the modern design do not align. Due to field widths some field labels are 1 line high and others are 2 lines high. I'm looking for a way to set the fields to vertical-align: bottom which I would use in the Classic Designer, but can't figure out the CSS to make this work in the Modern Flex model.

0 0
replied on October 18, 2023

It would be nice if this was added to Forms by default.

3 0
replied on October 17, 2023

I've had some success with this, but the alignment is to the bottom of the field container, if some fields have text below and others without the input fields don't align. It would be better if the alignment point was on the input field.

.line.ng-star-inserted {align-items:flex-end;}

0 0
replied on October 18, 2023

Found this is too generic as it sets all field in the form to bottom which gave undesired results when section were side by side, the fields in the shorter section of the form moved to the bottom as well. Can't seem to find a method to narrow this to just certain fields using classes.

0 0
replied on October 18, 2023

I've found some success by wrapping the fields in a section and then applying similar css to the children of the section.

#q4 .line {
    align-items: flex-end;
}

with Q4 being the ID of the specific section. This does cause the fields in the section to have less overall width but I believe that can be resolved with removal of padding on the section.

2 0
replied on October 18, 2023

Following up with one more addition to the CSS. In order to remove the padding that the section imposes you can add the following:

#q4 .pane {
  padding:0px;
}

where again #q4 is the id for the section.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...