I am working with a vaadin-dialog element that has been declared in the following way:
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 aim is to customize the position of the Dialog object on the screen.
The issue here is that the vaadin-dialog tag is not actually the dialog itself. The actual dialog is a separate tag called vaadin-dialog-overlay. While I can adjust its CSS, the problem lies in the fact that this tag does not belong to the view and gets added under the body in the DOM. It does not adhere to the class of the view or the class of vaadin-dialog set within vaadin-dialog.
So, how can I reposition the dialog differently for different views?
Until now, I have only managed to reposition the dialog using something like this:
vaadin-dialog-overlay {
align-items: end;
justify-content: end;
margin: var(--lumo-space-xl);
}
However, this applies to all views in the Vaadin project. I came across this answer, but I am struggling to understand how the solution "if you want to target those only, you'd write that selector as vaadin-dialog-overlay[theme="left"]::part(overlay)" can help in targeting specific overlays if I cannot manage overlay class and theme from a view?