Hello,
It would be very beneficial if the button height automatically matched the height of the other form fields. And that they retained their height even if the text in a preceding form field became two lines.
This takes more time to write additional CSS every time.
F.
Hi Fredolino
Did you try using a Multi Field area instead of the Grid when the fields are horizontal ?
Hi :-)
Initially, I only had classes (Horizontal Grid, Stackable) and a column gap.
I've since solved the problem using Sub Items and Column Sizes (1fr 1fr 2fr 2fr 1fr 1fr).
(For example, Sub Item3 contains a dropdown, Sub Item4 contains a dropdown, Sub Item5 contains a button, etc.)
With a little patience, it eventually worked.
F.
Hi Fredolino
Great, that's valid solution too :)
:-)
The crucial point, however, is that to ensure the buttons and dropdown/input fields have the same height, this style must be created for the buttons each time:
#btn1, #btn2 {
padding: calc(var(--pad) * 1.6) calc(var(--pad) * 5);
padding-left: calc(calc(calc(var(--pad) * 2) * 2) + 1em + calc(var(--pad) * 2));
}
The button height in a multi field row is based on the row Flexbox settings, if flexbox "align-items" is stretch then all elements will have the same height.
Is this what you need ?
