Customise Vaadin CRUD Editor Width

Question

I would like to customise the dialog of a Vaadin CRUD component (java) by replacing the min-width of the overlay with :

:host([theme~="layout"]) [part="overlay"] {
    min-width: 100%;
}

I put it into a css flle and then add in my java class :

@CssImport( value = "styles/gridCrudEditor.css", 
            themeFor = "vaadin-dialog-overlay", 
            id = "dialog-layout-overlay-theme")

But it apply for all grid crud editor and I would like to apply it to only one instance. By default, it's (in vaadin-dialog-layout-overlay-styles.js)

:host([theme~="layout"]) [part="overlay"] {
    max-width: 54em;
    min-width: 20em;
}

As it's the dialog of the crud... I don't how to proceed

Answer 1

You should be able to do the following:

Java

crud.addThemeName("my-theme");

CSS

:host([theme~="my-theme"]) [part="overlay"] {
  min-width: 100%;
}