[form-layout] Form item label does not align with vaadin-text-field label

[jouni]

<vaadin-form-layout responsive-steps='[{"columns": 2, "labelsPosition": "top"}]'>
  <vaadin-combo-box label="Label" placeholder="Placeholder"></vaadin-combo-box>
  <vaadin-form-item>
    <label slot="label">Options</label>
    <div>
      <vaadin-checkbox checked>Checked</vaadin-checkbox>
      <vaadin-checkbox>Unchecked</vaadin-checkbox>
    </div>
  </vaadin-form-item>
</vaadin-form-layout>

A similar baseline fix, which is used in vaadin-text-field, should be applied for the form item label as well (when labelsPosition=='top').

[jouni]

Not sure if this is worth fixing. It probably can’t be fixed so that it works in all possible cases (e.g. when using the small theme for vaadin-text-field), but maybe worth fixing so that the most common use case works as expected?

[jouni]

As a workaround, use align-self: flex-start; for the form item:

<vaadin-form-item style="align-self: flex-start;">

[platosha]

but maybe worth fixing so that the most common use case works as expected?

I think so.

Since the baseline shift in <vaadin-text-field> is introduced by the Lumo theme, the fix for this should be applied in Lumo theme too.

[manolo]

We have this problem In Bakery. We need to hide a field when there is a new order and show it when editing the order, but the visual result does not align with other fields in the form, as you can see in the next screenshot when changing the display property:

This is the same case here, with the difference that we have a <vaadin-form-layout> inside instead of a <vaadin-form-item>.

The workaround in Bakery is to set <vaadin-form-layout style="align-self: flex-start;">