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;
    }