Vaadin 13 TextField text-align

Flow
1

Hello,

I need two components in the same layout the first one has text alignment on the center and the second text alignment on the right.
I tried this way:

.text-field-right {
text-align: right !important;
}
.text-field-center {
text-align: center !important;
}

textField1.getClassNames().add(“text-field-center”);
textField1.getClassNames().add(“text-field-right”);

But it did not work.
How can I do this?

2

The input element of the TextField is protected inside shadow-dom, so you cannot style it directly.

Luckily in your case there are built-in theme variants for text alignment in TextField, with Java API, try the following:

TextField alignCenterTextField = new TextField();
alignCenterTextField.setValue("Align center");
alignCenterTextField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);

TextField alignRightTextField = new TextField();
alignRightTextField.setValue("Align right");
alignRightTextField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_RIGHT);
3

Thank you very much. Helped me a lot.
May your life be long and happy.

4

Tatu Lund:
The input element of the TextField is protected inside shadow-dom, so you cannot style it directly.

Luckily in your case there are built-in theme variants for text alignment in TextField, with Java API, try the following:

TextField alignCenterTextField = new TextField();
alignCenterTextField.setValue("Align center");
alignCenterTextField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);

TextField alignRightTextField = new TextField();
alignRightTextField.setValue("Align right");
alignRightTextField.addThemeVariants(TextFieldVariant.LUMO_ALIGN_RIGHT);

Hello, Tatu Lund.
where do I check a list of these possible theme variants for the components?

5

where do I check a list of these possible theme variants for the components?

If you use Eclipse or IntelliJ as IDE, then they already should suggest you possibilities.

I.e. if you find addThemeVariants(…) method available for the component, then you can use ComponentVariant.XXX. I.e. when you type in “ComponentVariant.” the IDE will list available options (Replace “Component” with TextField, ComboBox, Notification, etc.)