text-align in TextField is ignored

Setting text-align on a TextField does nothing. If looked at with an object inspector (Chrome, …) it shows the style only applied to the vaadin-text-field “wrapper”, not to the input itself.

To reproduce just use the starter project and add a TextField with text-align set:

TextField tf = new TextField(); tf.setValue("should be aligned right"); tf.getStyle().set("text-align", "right");

The text inside will still be aligned left.

If you apply it to the input with an object inspector, the last characters will be greyed out (unless the field has focus - maybe interference by the suffix-slot?).

[Legioth]

@web-padawan Great. That’s way easier than any of the haxxors that I suggested!

Just to clarify, the Java code for doing this with Vaadin 10 would be tf.getElement().setAttribute("theme", "align-right");.

In an upcoming version (tentatively Vaadin 12), this will be further simplified to tf.addThemeName("align-right"), or if you prefer to not have a magic string in your code, you can do tf.addThemeVariants(TextFieldVariant.LUMO_ALIGN_RIGHT);.

[web-padawan]

When using Lumo theme, you should be setting theme to align-right, see https://vaadin.com/components/vaadin-text-field/html-examples/text-field-lumo-theme-demos

You can also take a look at how theme is implemented: https://github.com/vaadin/vaadin-text-field/blob/bcc503f1bedf41f01b625d7b5e5fb4c32b02bb78/theme/lumo/vaadin-text-field-styles.html#L310

There is one trick related to text overflow, but apart from that, you should be able to extend theme module and apply CSS to the [part=value] as described in the above comment.