Hi All,
I use Sidebar layout and when open the modal on the page, Apart from Sidebar, all page goes to the background. How can I fix this?
Thanks in advance.
Try to play with Z axis and the backdrop div ?
Can you share a screen on your section and element on the left ?
Ideally your whole editor screen ?
One thing to check: Make sure that the sidemenu and modal are not using the same variable, like isOpen. If opening the sidemenu and the modal both set isOpen=true then they’ll both be set to open at the same time.
Oh, I think you may have accidentally enabled the Backdrop on the Sidemenu:
When the backdrop option is On, the focus will be on the modal and there will be a backdrop effect on the rest of the page when the modal is open.
I appreciate all your help. I checked all the properties of the components again. The backdrop of the side menu is working well just for the mobile version, which is correct. There was no conflict with variables as well. If I set “off” the backdrop of the modal, the modal is displayed in front of the side menu, which is expected. But when I set “on” the backdrop of the modal, the modal goes to behind the side menu as attached.
1 Like
Ah ok, got it now!
You’ll need to add a margin-left to the container of the modal so that it aligns to the content section you have.
By default, the sidemenu comes with a fixed 280px width so the content section and any other section (like the modal you have) needs to have a margin-left of 280px.
You can make that width dynamic with the menuWidth variable that comes with the sidemenu.
Here’s a video I made for you to cover this specific use case.
Hopefully it helps! You can learn more about how the sidemenu layout works here as well.
1 Like
Thank you very much @Joyce, for taking the time. This so a good explanation, I understood the concept and I am gonna try it.
1 Like