-
Notifications
You must be signed in to change notification settings - Fork 14.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove minimum height on elements in Flexible Form #46591
Remove minimum height on elements in Flexible Form #46591
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems the upper margin and the lower margin of each elements are not same, a bit weird, can we have it in sync?
Good catch. I just checked the overall height and the label... but there seems to be a bit of un-aligned margin onthe filed in the right column... will update... |
37b6bf1
to
05912d6
Compare
Okay, fixed the layout glitch. I first thought it is a margin problem and then needed to hunt-down the root a bit. The problem was a condition that the helper text was not conditionally be rendered but always also as an empty element. That space was causing an un-alignment. |
* Remove minimum height on elements in Flexible Form * Fix helper description consistency in display
I noticed that the flexible trigger form always used minimum 80px as space per form row, even if content is less. This occupies a too much screen space for simple forms.
Root cause is that the labels are receiving a minimum height of 80px if no flex basis is defined as style. This PR fixes the layout bug.
Before:

After / with this PR (incl. review comment fixes):

FYI @shubhamraj-git