Expand VerticalLayout width to match Grid width

user_2795822 0
Viewed 98

I am writing a Vaadin SearchDialog which contains :

  • A search TextField
  • A Grid containing search results
  • Two action buttons to confirm or cancel

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 :

  • Vaadin flow 14.7 (full java)
  • Java 16
  • Spring Boot
vaadin-flow vaadin
2 Answers

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

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).

user_158615710
Related