CODEWITHSUNDEEP
cssvaadintextfieldvaadin-flowvaadin14
Natalie
Natalie

Reputation: 471

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

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.

Upvotes: 1

Views: 2403

Answers (2)

Jouni
Jouni

Reputation: 2918

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");

Upvotes: 1

Anna Koskinen
Anna Koskinen

Reputation: 1370

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.

Upvotes: 2

Related Questions