DateTimePicker doesn't fit nicely in a FormLayout with labels set on the side

[OlliTietavainenVaadin]

Description

DateTimePicker set in a FormLayout with labels set to the side doesn't fit the bounds of the form cell.

Possibly related issue: https://github.com/vaadin/web-components/issues/808

Expected outcome

DateTimePicker should respect the cell boundaries

Minimal reproducible example

public class HelloWorldView extends Div {
    public HelloWorldView() {
        setSizeFull();
        FormLayout formLayout = new FormLayout();
        formLayout.addFormItem(new TextField(), "TextField 1");
        formLayout.addFormItem(new TextField(), "TextField 2");
        formLayout.addFormItem(new DateTimePicker(), "DateTimePicker 1");
        formLayout.addFormItem(new DateTimePicker(), "DateTimePicker 2");
        add(formLayout);
    }
}

Steps to reproduce

Open the view. Resizing the browser window should show the broken behavior at certain breakpoints even with the default settings.

Environment

Vaadin version(s): 23.2.8 OS: Windows

Browsers

No response

[web-padawan]

Related to #112

[TatuLund]

I noticed the same when working on ProtoTools, I needed to apply some additional css to patch it work nicely in responsive layout. Also using it in Grid's editor is tricky. See: https://github.com/tatulund/prototools/tree/master/src%2Fmain%2Fresources%2FMETA-INF%2Fresources%2Ffrontend

[TatuLund]

Should the expected behavior to be wrapping the elements when they do not fit?

Define CSS

themes/my-theme/components/vaadin-date-time-picker.css

:host([theme~="picker-responsive"]) .slots {
    flex-wrap: wrap;
}

Enable theme variant with Java

dateTimePicker.addThemeName("picker-responsive");

[rolfsmeds]

Workaround for forcing the DTP (or any other field for that matter) wrapped in a FormItem to shrink to fit into the available space:

1. Set max-width:100% on the field itself, e.g. dateTimePicker.setMaxWidth("100%");

2. Apply min-width:0 to the FormItem's content element (0 makes it shrink to nothing, so if that's an issue you can replace it with something a bit less extreme like 8em). The exact CSS, added to themename/components/vaadin-form-layout.css or through @CssImport(filename.css, themeFor="vaadin-form-layout") is

#content {
  min-width: 0;
}

[rolfsmeds]

I suppose one solution that would avoid breaking changes would be to introduce a style property for setting the min-width?

E.g. --vaadin-form-layout-field-min-width or something, that defaults to auto, but can easily be set to something else.

[yuriy-fix]

The issue was triaged and currently added to the backlog for further investigation.

[rolfsmeds]

Come to think of it, this is a special case of https://github.com/vaadin/web-components/issues/606, so a universal solution for all text input field types would be best.

However, we'd still need a way (either default or opt-in) for FormItem to shrink below the default, which it won't do even if the field inside it has a smaller min-width.

[rolfsmeds]

The simplest solution that avoids fiddling with custom css, and is unlikely to cause unintended side-effects in existing applications, might be to simply modify the content wrapper to use display:flex, which would allow developers to set the (default) width to the minimum, and use flex-grow:1 to allow the field to grow bigger than the default if there's more space available in the FormItem.

For example

DateTimePicker dtp = new DateTimePicker();
dtp.setWidth("200px"); // This is the min-width
dtp.getStyle().set("flex-grow", "1");  // This allows it to grow beyond 200px
formLayout.addFormItem(dtp, "Label");

Perhaps the FormItem should then have API that sets the flex-grow, e.g. addFormItem(Component c, String label, boolean growToFill);

(At this point I'd also like to make the case that this issue is not a bug in DateTimePicker, nor technically a bug in FormLayout, but rather simply the way FormLayout works with all fields. It's just more obvious, and more likely to cause issues with DateTimePicker, because it's a wider component. Configuring the RepsonsiveSteps so that the form wraps to a fewer number of columns at the appropriate width is really the current by-design solution to the problem.)

[dnDeveloper]

This problem occurs in Vaadin 24.3 too and is a bigger problem than in 23.x, because the described workaround contradicts default style guideline to not inject style into Shadow DOM. Solved this by decreasing default width for date picker and time picker adding following style:

vaadin-date-picker {
  --vaadin-field-default-width: 8em;
}
vaadin-time-picker {
  --vaadin-field-default-width: 7em;
}