Styling dialog

Flow
1

How can i style a dialog in vaadin 12.

My javacode is:

public class ExtendedDialog extends Dialog {
	public ExtendedDialog(String title) {
		getElement().setAttribute("theme", "extended-dialog");
		...
	}

My shared-styles.html is:

<custom-style>
    <style>
 		.extended-dialog {
    		background-color: green;
    		color: green;
 		}
    </style>
</custom-style>

Why it is not working?

2

At least one thing I noticed:
Here getElement().setAttribute("theme", "extended-dialog");

you are setting the theme attribute of the element, but you are using the .extended-dialog class name in your style block. So instead of setting the theme attribute, you probably want setClassName("extended-dialog") or getElement().getClassList().add("extended-dialog"); (both of which should do the same thing).

3

When i use getElement().getClassList().add(“extended-dialog”); it is not working, it has no effect.

When i use setClassName(“extended-dialog”); then i get the error:

The method setClassName(String) is undefined for the type ExtendedDialog

When i use super.setClassName(“extended-dialog”); then i get the error

The method setClassName(String) is undefined for the type Dialog
4

You’re right, that’s my mistake. Dialog doesn’t implement HasStyle, which means it doesn’t have the setClassName. Updating the class through the element API probably won’t help, either, as the class name will probably not get to the actual Dialog element. As far as I can tell, you’ll need to stick to global styles with Dialogs (see for example here: https://github.com/vaadin/flow/issues/4115 ) but maybe someone will correct me if I’m wrong.

5

You’re probably better off adding class names to the content elements of the dialog.

6

ok

i will try to add classnames to the content elements of the dialog.

Really thanks for your try to help me.

7

Looks like that’s the way to go - there’s even a (slightly convoluted) example about it here: https://vaadin.com/components/vaadin-dialog/java-examples

-Olli

8

I think there is some documentation about here, at vaadin.com

https://vaadin.com/docs/v12/flow/theme/tutorial-theming-overlay.html