Label with line break

Flow
1

Hi,
I’m working with Vaadin 14 and i have some problem with setting labels to components. I wanted to add LAbel with two lines to my TextField Label. I tried

				myLabel.getElement().setProperty("innerHTML", "<b>text<br/>next line text</b>");

And it worked if i added it to vertical Layout like other component (add(myLabel); add(myTextField)) or if i added it to form layout

			formLayout.addFormItem(myTextField,myLabel);

but it didnt work well when i wanted add buttons next to mine textField and when i resized page enough then label was drawing on the left side of textField but text was at the bottom instead in the center of line, so text was below component on the left side. I don’t want it to change position, i would like it to have this always on top of my component.

When i’m adding it as another component then when i’m entering textField then label isnt changing color like when i’m adding it by textField.setLabel.

Is there any option to set label to textField by myTextField.setLabel with line break?

2

I’m not 100% sure I understand what you are trying to accomplish. Could you maybe draw up a quick sketch?

In any case, if you want to use HTML, it’s better to do new Div(new Html("<b>text<br/>next line text</b>")) than setting innerHTML in my opinion.

3

FormLayout:
!
[/url])

TextField Label:
!
[/url])

Ver Layout:
!
[/url])

I want something like in TextField label but when text will be longer than component then text should be written in next line lik in FormLayout. In FormLayout text isnt centered and in VerLayout is space beetwenn them there is ono fancy color changing label like in textfield and if would like to make another textfield with label next to textfield then inned do creat next horLAyout .

4

You can achieve that with CSS:

vaadin-text-field::part(label) {
  white-space: normal;
}

Note that the text field label isn’t designed to be multi-line, so there may be some odd behavior. Although it seemed to work OK when I tried it.

5

Hi,

You can also use the helper text or component. Here is the documentation
https://vaadin.com/docs-beta/latest/ds/components/input-fields/#helper

It’s a new feature added from Vaadin 18 or Vaadin 14.4 LTS.