CODEWITHSUNDEEP
vaadinvaadin-flow
Ronan Quintin
Ronan Quintin

Reputation: 25

Expand VerticalLayout width to match Grid width

I am writing a Vaadin SearchDialog which contains :

Basically this is my layout structure :

Dialog
|- MainLayout (VerticalLayout)
| - - SearchField(TextField)
| - - ResultGrid (Grid)
| - - ButtonLayout (HorizontalLayout)
| - - - CancelButton
| - - - ConfirmButton

My issue is that I try to expand the grid's width to it's maximum size. I used Grid::setWidthFull and this code

resultGrid.getColumns().forEach(column -> column.setAutoWidth(true));

But it seems that the mainLayout width still set to the "ButtonLayout" :

enter image description here

My technical context is :

Upvotes: 2

Views: 298

Answers (2)

Anna Koskinen
Anna Koskinen

Reputation: 1370

Grid::setWidthFull -- This means that you set the Grid's width to 100%, which in turn means that the Grid will use up as much or as little space as the parent layout has available regardless of its own contents.

If you want to expand the grid to accommodate all the contents, you don't want any width setting for it. I can't remember what the default is for Vaadin 14, but setWidth(null); should remove any previously set width.

For clearing the size settings in both directions at once there is also setSizeUndefined(), but that might not be optimal with your Grid (unless you have very few rows).

Upvotes: 0

Jerry U
Jerry U

Reputation: 638

VaadinDialog has a predefined padding applied to it. To remove it (let the Dialog take up full space, add the CSS below to your shared-styles.js file:

<dom-module id="my-dialog-styles" theme-for="vaadin-dialog-overlay">
 <template>
   <style>
     [part="content"] {
        padding: 0;
     }
   </style>
 </template>
</dom-module>

Or add this so your shared-styles.css file to make it fullscreen

    vaadin-dialog-overlay {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
    vaadin-dialog-overlay::part(overlay) {
        width: 100%;
        height: 100%;
        padding: 0;
    }
    
    vaadin-dialog-overlay::part(content) {
        padding: 0;
    }

Upvotes: 2

Related Questions