Styling a Dialog

Flow
1

Hi *,

I try add a border to a dialog. But, I couldn’t find out how I add a css class correct to the dialog.

getElement().getClassList().add(CSS_NAME);

adds the class somewhere else. And if I add it to my layout, in the dialog, there is still the white border from the dialog.

using vaadin 11.0.1

Help please. :slight_smile:

Thanks and Greats,
Lars

2

Hi Lars! The overlay elements in v10 are a bit special, including Dialog, Notification, and the dropdown elements of ComboBox, DatePicker, ContextMenu, and Select (coming in v12).

With those components, the main element (f.e. <vaadin-dialog>) is not the one which is visually shown. Instead, another element (f.e. <vaadin-dialog-overlay>) is created directly under the <body> element, to escape any parent stacking contexts.

The class attribute is not copied from the main element to the actual overlay element. In the latest versions of the overlay elements (currently in beta), the theme attribute is copied from the main element to the overlay elements, allowing you to style individual overlay elements.

To style a Dialog, you need to do the following (assuming you are using the latest beta version of the component):

Java:

dialog.getElement().setAttribute("theme", "my-custom-dialog");

HTML:

<dom-module id="my-dialog-customizations" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
	  :host([theme~="my-custom-dialog"]
) [part="overlay"]
 {
	    border: 3px solid white;
	  }
	</style>
  </template>
</dom-module>
3

Thanks for replay,

in other words: In vaadin 12 we can expect to style a dialog with dialog.addClassName(“my-class”); and reach the border of the dialog?

4

In vaadin 12 we can expect to style a dialog with dialog.addClassName(“my-class”); and reach the border of the dialog?

No.

The class attribute is not copied to the overlay component. But the theme attribute is, so you can use that to style the overlays. See my example above :slight_smile:

5

Jouni Koivuviita:
Hi Lars! The overlay elements in v10 are a bit special, including Dialog, Notification, and the dropdown elements of ComboBox, DatePicker, ContextMenu, and Select (coming in v12).

With those components, the main element (f.e. <vaadin-dialog>) is not the one which is visually shown. Instead, another element (f.e. <vaadin-dialog-overlay>) is created directly under the <body> element, to escape any parent stacking contexts.

The class attribute is not copied from the main element to the actual overlay element. In the latest versions of the overlay elements (currently in beta), the theme attribute is copied from the main element to the overlay elements, allowing you to style individual overlay elements.

To style a Dialog, you need to do the following (assuming you are using the latest beta version of the component):

Java:

dialog.getElement().setAttribute("theme", "my-custom-dialog");

HTML:

<dom-module id="my-dialog-customizations" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
	  :host([theme~="my-custom-dialog"]

) [part=“overlay”]
{

  border: 3px solid white;
}
```

It does not work with Vaadin 14 (Vaadin 14.0.7, production mode, without compatibility mode and with Material Theme)
:frowning:

6

How about this ?:

:host(vaadin-dialog-overlay) [part~="content"]
 {
    background: rgba(126, 156, 156, 0.25);
}