Search code examples
javauser-interfacevaadinvaadin14

Is there a way to stack date and time vertically in Vaadins DateTimePicker component?

For choosing some values of different data types in my UI, I use Vaadin's DateTimePicker introduced in 14.3.x.

I am wondering if I can somehow position date and time input fields vertically instead of horizontally? See the picture:

enter image description here

The DateTimePicker component is here simply to width horizontically. And I don't have the option to make all other inputs like the one for a string wider, too.

I have checked the API but there doesn't seem to be a stardard way of achieving the vertically stacking. Has anyone an idea how to get this done?

Solution

  • it's doable with CSS. In your Java class, add a CSS import annotation for the class something like follows:

    @CssImport(value = "./styles/dtp.css", themeFor = "vaadin-date-time-picker")
public class MyView extends Div { 
//...

    When creating the DateTimePicker:

            DateTimePicker dateTimePicker = new DateTimePicker();
        dateTimePicker.setClassName("stacked");

    and in /frontend/styles/dtp.css:

    :host(.stacked) .slot-container {
    display: flex;
    flex-direction: column;
}