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

Question

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:

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?

Answer 1

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

Answer 2

On Vaadin 24, the setup for the accepted answer basically worked, I just needed to tweak the CSS:

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