rucko24
(Rubén Espinoza)
April 12, 2025, 11:44am
1
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.
knoobie
(Christian Knoop)
April 12, 2025, 12:35pm
2
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
rucko24
(Rubén Espinoza)
April 12, 2025, 12:43pm
3
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
knoobie
(Christian Knoop)
April 12, 2025, 1:01pm
4
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
vaadin:main
← vaadin:feat/dialog/position-api
opened 01:59PM - 04 Nov 24 UTC
## Description
Adds the position API that uses the newly introduced `top` and… `left` properties added to the Dialog web component.
Part of https://github.com/vaadin/web-components/issues/1060
## Type of change
- Feature
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
rucko24
(Rubén Espinoza)
April 12, 2025, 1:19pm
5
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.