Identifying CSS tag

Flow
1

Hi,

Hope for some help, identifying an element for reference in a CSS:

In attached image, you see a screen-dump of the readout from Chromes inspector, highligting an element in a Vaadin-dialog. The thing I am after, is the horizontal layout, assigned the class-name “dialog-head”. (component.setClassName(“dialog-head”)). I have tried to set a theme for the dialog-box as well as the horizontal layout and referencing them like in (@CssImport(value = “./styles/niels-dialogstyles.css”, themeFor = [component]
), but since neither the dialog nor the horizontal layout allows for this (there are no .addThemeNames() method on those) this is not possible

So my question is: how do I reference the shown class (“.dialog-head”) from my CSS.

TIA for any help
17901230.png

2

Hi Niels,

You can theme dialog-head with regular CSS.

Theming a vaadin-dialog is actually done by theming vaadin-dialog-overlay. (This is dumb, we know.) If you call dialog.getElement().setAttribute("theme", "my-theme") the overlay’s theme will also be set.

Then you can use themeFor = "vaadin-dialog-overlay".