Fullsize Dialog

Flow
1

I want to implement a dialog that uses the full size of the page.
I have been partly successful by adding a custom theme:

<dom-module id="fullsize-dialog" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
      :host([theme~="fullsize-dialog"]
) [part="overlay"]
 {
        width: 100%;
        height: 100%;
      }
    </style>
  </template>
</dom-module>

Unfortunately the content layout does not get stretched.
Any suggestions?

Actually I would just expect the setWidth("100%") and setHeight("100%") methods I can call on the dialog class to work…

2

I am now using the following solution:

On the dialog itself set the size using

// lumo-space-m is the margin of the dialog to the viewport
setHeight("calc(100vh - (2*var(--lumo-space-m)))");
setWidth("calc(100vw - (4*var(--lumo-space-m)))");

No need for a theme.
Are there possibly any pitfalls using this approach?

3

Thanks that is very useful :slight_smile:

4

Julien Charpenel:
I am now using the following solution:

On the dialog itself set the size using

// lumo-space-m is the margin of the dialog to the viewport
setHeight("calc(100vh - (2*var(--lumo-space-m)))");
setWidth("calc(100vw - (4*var(--lumo-space-m)))");

No need for a theme.
Are there possibly any pitfalls using this approach?

Great solution!!!

5

Julien Charpenel:
I am now using the following solution:

On the dialog itself set the size using

// lumo-space-m is the margin of the dialog to the viewport
setHeight("calc(100vh - (2*var(--lumo-space-m)))");
setWidth("calc(100vw - (4*var(--lumo-space-m)))");

No need for a theme.
Are there possibly any pitfalls using this approach?

If you always need fullsize you’re probably good. Note though that using 100vh on iOS can result in scrollbars due to the way that iOS calculates height.

If you ever need dialogs that have different sizes, eg. 800px under normal circumstances but fullsize when used on snaller screens, you are probably better off with themes as you can rely on media queries to manage size.

6

I’ve created a bug report here: https://github.com/vaadin/vaadin-dialog-flow/issues/179