0

I have an issue with the DatePicker component with vaadin. I would like the date input field uses the entire space but unfortunately it seems to use only 50%. How to do to expand this ?

I use the property "display: inline-flex", "width: 100%" but nothing changes.

See below a screenshot.

enter image description here

Thank you

Edit :

Below you can see another example

enter image description here

I tried the setWidthFull() on the datePicket, and the datePicker uses 100% of free space but the input field inside the datePicker seems to continue to use only ~50% of the given space.

I would like to expand the input inside the datePicker to the datePicker's size

Here my java code

    rechercheSiretField = new NumberField("Siret");
    rechercheSiretField.setWidth("12em");
    rechercheSiretField.setClassName("filtre-item");

    dateDebut = new DatePicker("Date de début");
    dateDebut.setClassName("filtre-item");
    dateDebut.setWidth("12em");

All items are added in a flexLayout like this

    final FlexLayout rechercheLayout = new FlexLayout();
    rechercheLayout.setAlignItems(Alignment.CENTER);
    rechercheLayout.setJustifyContentMode(JustifyContentMode.CENTER);
    rechercheLayout.setFlexWrap(FlexWrap.WRAP);
    rechercheLayout.add(rechercheSiretField, dateDebut);

and the CSS I used

.filtre-item {
    margin: 0 1em 0.5em;
}

Thank you

jeje
  • 121
  • 1
  • 2
  • 7
  • 1
    Did you try to call setWidthFull() on the DatePicker? – Simon Martinelli Aug 24 '22 at 07:37
  • 1
    You should add a code sample of how you're creating the component and its parent layout. – ollitietavainen Aug 24 '22 at 07:50
  • i think you have to use the css custom property: `--vaadin-field-default-width`. You can read on this other thread how to do it: https://stackoverflow.com/questions/67805082/vaadin14-how-to-change-width-of-textfield-label-caption – Boguz Aug 24 '22 at 07:52
  • 1
    Depends on what the container you're putting those fields in is. Is it a `FormLayout`, a `VerticalLayout` or just some html element? If it's a `FormLayout`, widths are managed with colspans, e.g. `setColSpan(2)` If it's a `VerticalLayout` or a `div` or something, setting `width:100%` / `setWidthFull()` should do it, and if it doesn't, there's something off with the container, so sharing details of the container and the layout structure in general would help. – Rolf Aug 24 '22 at 09:49
  • 2
    There should not be a need to touch the `--vaadin-field-default-width` property, unless you specifically want to adjust the default width of the field components. It should not be used to control the width of individual fields (although you can do that). – Jouni Aug 24 '22 at 11:26

0 Answers0