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.

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.


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:

component.getStyle().set(“–length”, Integer.toString(charWidth) + “ch”);
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);