I need to compress the display of one of my forms somewhat to fit more data onto the screen.
For this I would like to reduce the space between a text-field’s label and its content field from 7px (which seems to be the default) to - say - 2px.
Trying to visualize this:
Class com.vaadin.flow.component.textfield.TextField
Current layout:
Label:
> this is the space I want to reduce
+-----------------------------------+
| Text Input Area |
+-----------------------------------+
Desired layout: The Label should be closer to the input area:
Label:
+-----------------------------------+
| Text Input Area |
+-----------------------------------+
The gap between the label and the input field - as I found out - is controlled by the label’s bottom-margin (which is 7px high).
But no matter what I try in my style sheet - I can’t adjust that value!
The labels are all defined as <label id="vaadin-text-field-label-##" ...>
(## meaning some number). So I first tried to select them using a selector label[id^="vaadin-text-field-label"] , i.e. select all labels with ids beginning with “vaadin-text-field-label” but that did not work. It had no effect whatsoever! And not even selecting ALL labels and setting their bottom-padding to 2px like so:
label {
padding-bottom: 2px;
}
changed anything. If I “inspect” the widget in the browser’s development tools the label has again a bottom margin of 7px.
So there seems to be some other mechanism that adjusts that padding which by-passes the style sheet.
How/where can I control that gap between label and input area?
Thanks for the pointer! The described approach worked perfectly for TextFields and TextAreas.
However, Combobox has no “setThemaName(…)”-method. I would need to adjust their label-margin/padding as well.
How can one mark those so that a “theme~=…”-clause can refer to them? Or what other approach can one use for these?