Truncated labels in TextField

In the application I have made HorizontalLayout in which I have two “TextField” components. Each of them has a label set which has about 5 words each. However, the last word is cut off and replaced with “…”. How can I make it so that the entire label is displayed. Is this even possible? Vaadin 24.

https://discord.com/channels/732335336448852018/1143496298310414436

I checked this out, and I seem to have the same issue as the guy below. Now the input field is way too long.

Well you could also style the label with white-space: normal if you are fine with wrapping / jumping fields

If you just want a field to be wide enough for a known the label, you could always set the field width.

field.setWidth(“100px”);

I asked a similar question earlier; I wanted fields that were narrower, but not narrower than their caption.
That was done with the following css in some suitable rule:

–vaadin-field-default-width: min-content;

I don’t use ComboBox, but I assume this variable is used there as well.

Next, I wanted to set the input-part to a certain size. That was done with this:
java:

component.getStyle().set(“–length”, Integer.toString(charWidth) + “ch”);
css:
vaadin-text-field > input {
width: var(–length, 10ch);
}

Hope some of this helps

good answers already above, so I don’t really have anything to add, but I want to point out that I would recomment the input-field part instead of the input element for setting a width to the field part:

  width: var(--length, 10ch);
}```