Style content of a Dialog

Flow
1

I use dialog to display information.
I would like to style content (nothing special just H1, H2, Paragraph) with css
I try to apply style to element, class, id
None works :frowning:

I can only applay style directly to components:
H2 title = new H2(“title”);
title.setClassName(“uatitle”);
title.getElement().getStyle().set(“margin”, “0px”);

2

Hi Kucsera,

maybe you want to read through GitHub - vaadin/vaadin-themable-mixin: A shared mixin to provide an easy way to include Polymer style modules in any Polymer element template

It explains well how to work with webcomponents and styling as it sounds like you run into trouble with the shadow DOM.

Cheers,
Paul

3

THX I will

4

For the reference, you can add styles inside a dialog like this:

<dom-module id="my-dialog-styles" theme-for="vaadin-dialog-overlay">
  <template>
    <style>
      /* Styles defined here are effective only inside a dialog */
      h1 {
        color: red;
      }
    </style>
  </template>
</dom-module>

Note that it’s theme for vaadin-dialog-overlay, not vaadin-dialog.

5

Thanks
I get here:

<custom-style>
    <!-- ActionBar custom styles -->
    <style>

        .actionbar {
            width: 100%;
            justify-content: center;

        }

        .actionbar * {
            margin-left: 3px;
            margin-right: 3px;
        }

    </style>

    <dom-module id="my-dialog-styles" theme-for="vaadin-dialog-overlay">
        <template>
            <!-- ActionBar in dialog custom styles -->
            <style>

                .actionbar {
                    width: 100%;
                    justify-content: center;

                }

                .actionbar * {
                    margin-left: 3px;
                    margin-right: 3px;
                }

            </style>
        </template>
    </dom-module>

</custom-style>