Dialog full size in Flow 25?

Flow
1

Hello,

Do you know of any way to make the Dialog 100% of the height and width of the screen, so that it covers everything completely?

It’s not a simple setSizeFull()

This worked for me in Vaadin Flow 24


.dialog-details {

-webkit-align-items: center;

align-items: center;

bottom: 0;

contain: strict;

display: -webkit-flex;

display: flex;

-webkit-justify-content: center;

justify-content: center;

left: 0;

overflow: hidden;

overscroll-behavior: contain;

position: fixed;

right: 0;

top: 0;

z-index: 999999 !important;

}

But now in Vaadin Flow 25, it’s like it doesn’t affect the overlay.

2

Yes, it is a bit tricky:

You need to set the dimension to the overlay part to make it 100% and also, if wanted, the inset to 0, to make it fully full size

vaadin-dialog::part(overlay) {
      border-radius: unset;
      width: 100vw;
      height: 100vh;
      
      /* for mobiles you need to take some more things into account, like keyboard and browser url, but this is optional and really just necessary for phones etc. */
      /* height: calc(100svh - env(keyboard-inset-height));*/
}

vaadin-dialog {
     /* also reduce the inset to 0, otherwise it is like 98% */
      --vaadin-overlay-viewport-inset: 0; 
}
3

Hi dude,

image
image1855×988 72.1 KB

mmm, Something strange is happening; it doesn’t enlarge completely.

Tested on Google Chrome, Linux, Vaadin Flow 25.0.2

4

Have you added the inset property to vaadin-dialog?

5

Hi ,

yes

vaadin-dialog.visualizer-dialog::part(overlay) {
   border-radius: unset;
   width: 100vw;
   height: 100vh;
}

vaadin-dialog.visualizer-dialog {
   /* for mobiles you need to take some more things into account, like keyboard and browser url, but this is optional and really just necessary for phones etc. */
   /* height: calc(100svh - env(keyboard-inset-height));*/
   * also reduce the inset to 0, otherwise it is like 98% */
   --vaadin-overlay-viewport-inset: 0;
}

and the dialog

dialog.setSizeFull();
dialog.addClassName("visualizer-dialog");
6

If that is the original, then the comment above the inset is broken, maybe that’s the problem

  • also reduce the inset to 0, otherwise it is like 98% */

and the class name in java is different

7

thanks a lot dude.

It works.