refitting the vaadin dialog

Flow
1

Polymer’s paper-dialog has the ‘fitInto’ method that allows us to assign the dialog to any element, over which it centers.

Is there a vaadin equivalent, or if not, is there a way of targeting an element outside of the vaadin-dialog over which the dialog might center?

2

Hi Mel,

vaadin-dialog does not have a corresponding feature. We might add one in the future, however.

Could you describe in a bit more detail what it is you want to achieve? Perhaps I could find a workaround for you.

3

There’s an html canvas, which takes an off-centered portion of the screen. I’d like to center the dialog within it.

Using javascript, I tried grabbing the getBoundingClientRect() data from the canvas and the dialog in order to calculate an approximate canvas center via a simple formula, then positioning the overlay and backdrop via js commands such as
this.dialog.$.overlay.$.content.style.left = ${x}px;.

This works in most cases (a conditional is used for one exception), but it all makes me ache for an easier way.

I also wondered if there were a way to pass dynamic values from a js file to an imported style sheet that might contain a rule like this:

:host([theme~=“dialog”]
) [part=“content”]
{
left: var(–imported-position)
}]

I’d imagine var(--imported-position) would be defined in the js file, but how would it be passed to the style sheet?

Thanks!