Make Label larger than Input

Flow
1

Hello CSS-Wizards,
I need some help with this.

In Vaadin 8 the width of an input was the maximum of label length and the length of the actual input. Nowadays the total length is always the length of the input, and if the label is longer it will be shortened with an ellipsis.

Example from Vaadin 8 app:
image

Same app, but now with Vaadin 24:
image

How can I adjust the style so that it looks like before?

2

Hello, try add to frontend/themes/you_theme/components/vaadin-text-field.css:

[part='label'] {
    white-space: unset;
}
3

Thanks, but that does seem not to have any effect.

4

In Vaadin 24, you can also use the simpler vaadin-text-field::part(label) selector. The different parts and styling are documented here https://vaadin.com/docs/latest/components/text-field/styling

5

To prevent long labels from being truncated you’ll need to remove the default width of the component:

vaadin-text-field {
  --vaadin-field-default-width: auto;
}

By default, the input field will then grow together with the label. If you want a smaller input field then set a max width on it:

vaadin-text-field::part(input-field) {
  max-width: 6em;
}

Bildschirmfoto 2024-11-15 um 19.46.32

1 Like
6

But how do I set the width at runtime? Not all inputs habe the same length, of course.
I tried with a utility method which uses the Element API to access the label and the input slot and set individual width attributes, but it doesn’t work quite yet.

	public static void setLength(HasLabel component, String labelWidth, String inputWidth) {
		List<Element> labelElements = component.getElement().getChildren().filter(e -> ElementConstants.LABEL_PROPERTY_NAME.equals(e.getAttribute(ATTR_SLOT)))
				.toList();
		labelElements.forEach(l -> l.setAttribute(ElementConstants.STYLE_WIDTH, labelWidth));

		List<Element> inputElements = component.getElement().getChildren().filter(e -> INPUT_PROPERTY_NAME.equals(e.getAttribute(ATTR_SLOT))).toList();
		inputElements.forEach(i -> i.setAttribute(ElementConstants.STYLE_WIDTH, inputWidth));

	}

Update: I just noticed that the elements-lists are empty… so how do I access the slots then?

7

Those elements have no representation on the server side. If you want to make it dynamic, then I’d suggest to use a CSS variable for setting the input width, and then change that CSS variable per field instance.

In CSS:

vaadin-text-field::part(input-field) {
  max-width: var(--my-input-field-max-width, 12em);
}

In Java:

textField.getStyle.set("--my-input-field-max-width", "6em");
1 Like
8

I was able to do it like this:

  • Add the style to your styles.css:
.custom-width-container::part(input-field), /* (1) */
vaadin-text-field::part(input-field) { /* (2) or for all text fields */
    width: var(--container-width, 100%);
}
  • Specify the width in Java:
TextField textField = new TextField("Anzahl aktiver Niederlassungen");
textField.addClassName("custom-width-container"); // add class, only (1)
textField.setWidth("400px"); // maybe not needed
textField.getStyle().set("--container-width", "100px"); // your value

Grüße

9

Thank you all so much! It finally works. :)

1 Like