How to reuse a backdrop?

I try to use the backdrop in a Section component, but I don’t see it as very easy at the first time.

At the moment the only solution I see is to extend a PopOver and inside the PopOver add a Section and then adjust the css.

Any simpler idea ?


the red zone, is where I want to have the typical backdrop a little bit dark.

So you wanna mimic the behavior of a modal dialog while not using a modal dialog? Can’t you simple use a modal dialog with appropriate positioning for your left panel and let Vaadin automatically handle the backdrop of the right side? This would also drastically improve accessibility

Yes, let’s say yes…

That’s what I want, that PopOver backdrop to the Section component, but it’s hard for me to see it at the moment.

I will try to see what you say, if it would be good an example of these in the Vaadin cookbook.

I am guiding myself with the

Since 24.6 it’s possible to use an dialog exactly for this by setting left and top to 0 to position it like you need it. That’s all, backdrop and all comes out of the box

Popover is not really meant for this kind of design

Edit: the upcoming version 24.8 might contain a component that can replace your whole view Master-Detail Layout · Issue #7173 · vaadin/platform · GitHub

Ok thanks, well, it’s still hard to see it but …

Maybe with a Horizontal layout, with two components ie.

Row add:

– Section: first-section

– Div: the second section, ( with custom backdrop, and custom css )


Sure, but I see that the modal part would be missing perhaps, well I will take a closer look at how to do it.

uff, a horrible hack, but it’s pretty close to what I want.