Vaadin 14 Time Picker - align centered

S. Doe :

with Vaadin 14(.1.19) comes this Time Picker component: https://vaadin.com/components/vaadin-time-picker/java-examples

This is how it looks like (when it's read-only):

How can I get this Time Picker to show the time centered like this (this is a screenshot of a manual manipulation in the browser (setting text-align:center directly at the embedded input field), not a programmed solution)?

I tried to set the text-align property in the Java code without effect:

TimePicker timepicker = new TimePicker();
timepicker.getElement().getStyle().set("text-align", "center");

And I searched for a theme variant. But that seems to exist for TextFields and derived fields only:

EmailField emailFeld = new EmailField();
emailFeld.addThemeVariants(TextFieldVariant.LUMO_ALIGN_CENTER);

Steffen Harbich :

You will need to change the CSS within the shadow DOM of TimePicker's TextField value part, we use theme attribute as additional selector in order to not to theme all the text fields:

[part="value"] {
    :host([theme~="center"]) text-align: center;
}

Include the CSS via @CssImport annotation, theming the text field and set the theme attribute to the date picker. The theme attribute is propagated to the text field used in the date picker:

@CssImport(value = "./styles/my-time-picker-styles.css", themeFor = "vaadin-time-picker-text-field")
public class YourViewOrLayout extends Composite<Div> {
   ...
   timePicker.getElement().setAttribute("theme", "center");
}

I explained it in bit more detail in this answer.