I want to edit vaadin-dialog-overlay css properties differently on different views

Question

I have a vaadin-dialog element that is declared like so:

  render() {
    return html`
<vaadin-vertical-layout class="contents-list">
    <h2 class="osiris-block-title">Feeds Overview</h2>
    <vaadin-horizontal-layout class="osiris-block">
            <vaadin-vertical-layout class="osiris-card">
                <vaadin-horizontal-layout class="osiris-card-grid-filter" theme="spacing padding">
                    <vaadin-text-field id="search-field">
                        <vaadin-icon slot="prefix" icon="vaadin:search"></vaadin-icon>
                    </vaadin-text-field>
                    <vaadin-checkbox id="my-feeds-checkbox" label="Only my feeds"></vaadin-checkbox>
                    <vaadin-button id="filter-button">
                      Filter
                    </vaadin-button>
                    <vaadin-dialog id="filter-dialog" class="orisis-grid-filter" opened=false>
                    </vaadin-dialog>
                </vaadin-horizontal-layout>
                <vaadin-grid id="feed-grid" class="orisis-card-grid" theme="no-border row-stripes"></vaadin-grid>
            </vaadin-vertical-layout>
    </vaadin-horizontal-layout>
</vaadin-vertical-layout>`;

My goal is to set custom position of my Dialog object onscreen.

The problem is, vaadin-dialog is not the dialog itself. The "real" dialog is a separate tag vaadin-dialog-overlay. I can absolutely edit its CSS, but the problem is - this tag doesn't belong to view and adds under body in DOM. It doesn't respect class of view or class of vaadin-dialog set in vaadin-dialog or anything.

So, how can I reposition dialog differently for different views?

So far I was only able to reposition dialog by doing something like this:

vaadin-dialog-overlay {
    align-items: end;
    justify-content: end;
    margin: var(--lumo-space-xl);
}

But this applies to all views of Vaadin project. I saw this answer proposed, but it totally eludes me how "if you want to target those only, you'd write that selector as vaadin-dialog-overlay[theme="left"]::part(overlay)" solution can help to target certain overlays if I can't manage overlay class and theme from a view?

score 3 · Accepted Answer · answered Jun 22 '23 at 14:31

The theme attribute should be automatically forwarded from the dialog element to the overlay element.

Since 24.0 you can also use the overlay-class attribute on the dialog, which gets forwarded as class on the overlay:

<vaadin-dialog overlay-class="custom-dialog">

In your global CSS you can then add:

vaadin-dialog-overlay.custom-dialog::part(overlay) {
  ...
}

I want to edit vaadin-dialog-overlay css properties differently on different views

1 Answers1