Hello,
i would like to use a label that expands over multiple lines in a FormLayout. But the alignment is quite off for this (see attachment). I tried to use css
align-self: center;
but i get the error message, that this element is not part of a flex layout from firefox.
I also tried to add the style directly to the “slot” element, and this seemed to work somehow. The label was more centered, but still way off. Also i do not really know how to modify the “slot” element for this single item. I suspect i have to use the shadow dom in the global styles?
My code is as following:
<vaadin-form-layout style="width: 100%; height: 100%;">
<vaadin-form-item>
<label slot="label">Name</label>
<vaadin-text-field class="full-width" value=" " id="Name" has-value></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label" style="align-self: center;">MultiLine-<br>TestLabel</label>
<vaadin-text-field class="full-width" value=" " id="test" has-value></vaadin-text-field>
</vaadin-form-item>
<vaadin-form-item>
<label slot="label">Note</label>
<vaadin-text-area class="full-width" value=" " id="note" has-value></vaadin-text-area>
</vaadin-form-item>
</vaadin-form-layout>
Any help would be great. Thank you.
System info:
Vaadin 14.1.3
Browser Firefox