Expand VerticalLayout width to match Grid width - vaadin

Question

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" :
My technical context is :
Vaadin flow 14.7 (full java)
Java 16
Spring Boot

Answer 1

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

Answer 2

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