Vaadin14: How to change width of TextField label (caption)?

Question

Using Vaadin14 I want to change the width of the label (caption) of the TextField. With the default value the caption is only partially displayed even if I set the size of the TextField to "setSizeFull". I tried the following (similar to the Vaadin14 app start code):

 TextField queryString = new TextField();
 queryString.setWidth("200px");
 queryString.setLabel("long label text, long label text, long label text");
 queryString.setThemeName("longlabel");

CSS file import:

 @CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")

and the content of the vaadin-text-field-styles.css is:

 :host([theme~="longlabel"]) [part="label"] {
    width: 400px;
 }

This does not change the width of the label.

Is there a lookup for the default CSS settings of the Vaadin14 components? That would be helpful also for the change of other components.

Anna Koskinen · Accepted Answer · 2021-06-02T13:23:42.207

2

Does your parent layout have enough room to display that text? It could be clipping off the label.

When you use setSizeFull() that means you are trying to use exactly as much space as the parent element has. If you want to use as much space as your contents need, you generally need setSizeUndefined(), although I think TextField might have a default width (at least it used to in Vaadin 8) and in that case it might not work. (I don't have a Vaadin 14 project at hand to test this right now.)

Have you tried if queryString.setWidth("400px"); makes any difference?

Edit: overflow: visible allows the label to reach beyond the main body of the TextField.

edited Jun 02 '21 at 13:23

answered Jun 02 '21 at 12:47

Anna Koskinen

1,362
3
22

I tried queryString.setWidth. But this did not help. There is enough room. There must be a default label width set. But I could not find the default component CSS file. Vaadin8 is different. – Natalie Jun 02 '21 at 13:12
At least when I try editing the DOM tree in Chrome inspector in https://vaadin.com/components/vaadin-text-field/java-examples/text-field the label only cuts off when it reaches the TextField's overall width. If I also give the label element style `overflow: visible;` then it reaches beyond the TextField itself. – Anna Koskinen Jun 02 '21 at 13:20

score 1 · Answer 2 · answered Jun 04 '21 at 14:12

The width of the label is constrained by the width of the main component. As you set the width of the text field to 200px, the label can't be longer than that.

To get it working as you like (label longer than the field), you either need to do what Anna suggested (overflow: visible), or set the main component width to auto, and set the width of the internal text-input element to a fixed value (for example 200px).

Here’s one way to do it.

vaadin-text-field-styles.css:

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

[part="input-field"] {
  width: var(--input-field-width);
}

Java:

TextField queryString = new TextField();
queryString.getElement().getStyle().setProperty("--input-field-width", "200px");

I did not get this to work yet. Maybe it needs to be "set" instead of "setProperty"? — Natalie, Jun 06 '21 at 11:39
Yeah, could be. I didn't check the API and don't remember it exactly. Edit: yes, use `set` instead of `setProperty`: https://vaadin.com/api/platform/14.6.2/com/vaadin/flow/dom/Style.html#set-java.lang.String-java.lang.String- — Jouni, Jun 10 '21 at 09:25

Vaadin14: How to change width of TextField label (caption)?

2 Answers2

Linked