Form field label plus required indicator wraps (sometimes) one side positioned labeling

[stefanuebe]

Description

Our form layout allows to place labels on the side of input fields. Setting a required indicator might lead to a case, where the label container wraps its content, placing the label in the first line and the required indicator in the second one.

Expected outcome

The div containing the label text and the required indicator should not break lines / wrap content. Instead the label text should be allowed to wrap.

The above shown sample applied the following changes to the <div part="label"> inside the form field's shadow dom (plus adding some gibberish to the <label>.

display: flex;
gap: var(--lumo-space-xs);

Minimal reproducible example

1. Go to https://vaadin.com/docs/latest/components/form-layout#side
2. Select one of the three text fields via the dom inspector.
3. Add the "required" attribute to it. The attribute will automatically be added to the form field, too.
4. The required indicator appears and will be shown in the next line. (Strangely not always, but most times)

Steps to reproduce

See minimal reproducible example.

Environment

Vaadin version(s): 24.4.x? (depends on the Vaadin version used in the docs)
OS: --

Browsers

Chrome

[rolfsmeds]

It might be sufficient to set white-space:no-wrap on [part~="label"]

[TatuLund]

There is another ticket about this elsewhere, so this duplicate. I have commented a workaround there.

[web-padawan]

Adding white-space: nowrap doesn't seem to solve the problem as in case of using the hardcoded item label with, the required indicator would still wrap (this is what is done in the linked example: --vaadin-form-item-label-width: 60px).

We could add display: flex on the label part but it will be still possible to overflow e.g. like this:

[rolfsmeds]

overflow-wrap: break-word; could solve that perhaps, to force work-breaking wraps if the label would otherwise overflow?

[vursen]

Just want to note that applying display: flex changes the position of the required indicator:

Current	display: flex

Current	display: flex; overflow-wrap: break-word

Using overflow-wrap: break-word without display: flex can still cause the required indicator to wrap separately from the label. So, only the combination of both solves the "issue".

But, isn't the real problem that the label width is too small in the provided example and just needs to be increased?

[rolfsmeds]

Yes, that is the root problem of course. But there is a kind of "secondary problem" that the required indicator ends up on its own line disproportionately often. I also feel that it should never end up on its own line at all, because it then doesn't really look like a required indicator but just some random pixels below the label.

And while you could argue that the solution is to simply increase label col width, in many apps you don't know what the label might be due to i18n, so you don't know how wide the label col needs to be.

[jouni]

Could we use the same approach as in the regular field component implementations? That is, add padding to the end of the label, use word-break: break-word, and use position: absolute for the required indicator.

This is what I get then:

Screen.Recording.2025-05-07.at.13.43.32.mov

[rolfsmeds]

That would probably make sense. Could do it in V25.0 at least.

[jouni]

Yeah, I’ve been planning to do that in the base styles.