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