How to set size for Dialog?

Flow
1

Hi, anybody can explain how to set size for Dialog element?
I dont see- setWidth or setHeight like a old Vaadin versions.
I try:
create css style like .dialog_size_50_persents{width:50%;height:50%}
and addClassName(“dialog_size_50_persents”); but not working(((

2

You need to create a theme for the component and put it in your css sheet.

Something like:

<dom-module id="my-dialog-overlay-theme" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
      :host {
        padding: var(--lumo-space-xs);
      }
      [part="overlay"]
 {
        display: flex;
        animation: none !important;
        min-width: 300px;
      }
    </style>
  </template>
</dom-module>
3

@Manuel Ok but what if I need different sizes on my app? I’v tried to pass a class to vaadin-dialog component, but it is not transmitted to the vaadin-dialog-overlay component wich control the size.

4

Manuel Carrasco:
You need to create a theme for the component and put it in your css sheet.

Something like:

<dom-module id="my-dialog-overlay-theme" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
      :host {
        padding: var(--lumo-space-xs);
      }
      [part="overlay"]

{

    display: flex;
    animation: none !important;
    min-width: 300px;
  }
</style>
```

Thanks)

5

Thomas Rennesson:
@Manuel Ok but what if I need different sizes on my app? I’v tried to pass a class to vaadin-dialog component, but it is not transmitted to the vaadin-dialog-overlay component wich control the size.

Hi!

This seems to be quite tricky. I however found a hard and hacky way for setting classnames for dialog overlays.
Start by adding styles for the <vaadin-dialog-overlay> based on its classname like this:

<dom-module id="my-dialog-overlay-theme" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
      :host(.red) {
      	background: red;
      }
      :host(.blue) {
      	background: blue;
      }
    </style>
  </template>
</dom-module>

The problem is that there’s a server-side component only for the <vaadin-dialog> element, and not for the overlay. The currently opened overlay can be however found by its id, which is always overlay. So you can have this kind of hacky method for adding a classname for the currently opened overlay:

private void addClassNameToOverlay(String className) {
    getUI().ifPresent(ui -> ui.getPage().executeJavaScript(
            "document.getElementById('overlay').classList.add($0)",
            className));
}

You need to call this method when opening the dialog to have the overlay element present:

redDialog.addOpenedChangeListener(event -> {
    addClassNameToOverlay("red");
});

And like this you can apply different classnames to different dialogs. I know it’s not convenient at all but at least it’s possible to make it work.

6

Thanks everybody)

7

Related to this post: the next version of Dialog will have the setWidth and setHeight methods in place. [This ticket]
(https://github.com/vaadin/vaadin-dialog-flow/issues/35) was implemented and the PR is already merged.

The next version of the Dialog will be 1.0.0.beta6, and will be released this week.

8

Hi everyone. I walked away from the problem as follows - added layout with className large-layout and placed the following script in css file

.large-layout{
position: absolute;
top: 5%;
left: 5%;
right: 5%;
width: 90%;
height: 90%;
background-color: #ffffff;
text-align: center;
border-radius: 5px;
z-index: 10;
box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}