4

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):

Vaadin Time Picker component normal

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)?

Vaadin Time Picker component with centered text

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
  • 2,639
  • 2
  • 37
  • 71
S. Doe
  • 685
  • 1
  • 6
  • 25

1 Answers1

2

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.

Steffen Harbich
  • 2,639
  • 2
  • 37
  • 71
  • 1
    Hi Steffen and hi Tatu, thank you both! It works with two modifications: First I exchanged the value of "themeFor": @CssImport(value = "./styles/time-picker-styles.css", themeFor = "vaadin-time-picker-text-field"). I also tried "vaadin-text-field" and "vaadin-time-picker". But for "vaadin-time-picker" the browser placed the style property in a shadow root too high. And second I removed "host([theme~="center"])". I also tried to move it outside the braces but that had no (visible) influence at all. Yes, this way all TimePickers are centered. This is OK for my case. – S. Doe Mar 18 '20 at 07:21
  • Yeah, you are right, it should be "vaadin-time-picker-text-field". Regarding the "theme", I am not even sure whether this is valid CSS. Maybe @Tatu (edited) could point that out? I guess `:host([theme~="center"])[part="value"] { text-align: center; }` should work. – Steffen Harbich Mar 18 '20 at 15:53
  • 1
    No, this does not work. The vaadin-time-picker element has attribut theme = "center". In the shadow root of vaadin-time-picker element there is a vaadin-combo-box-light element. In that there is a vaadin-time-picker-text-field element. In its shadow root there is a style element with ":host([theme~="center"])[part="value"] { text-align: center; }" and also the slot element with the input in it. So the CSS selector would have to be ":host[...] :host[...]" or something like that - I don't know. But nevertheless your answer helped me. :-) – S. Doe Mar 18 '20 at 19:22