Mac OS
Wappler 4.6.0
Was working fine previously, now when its uploaded to server and even on local machine the off canvas is behind the dimmed part and you are unable to select anything.
This was working fine previously and nothing has changed on the page.
Does anyone have any ideas how I can get rid of this happening? Pretty urgent.
How is the off canvas setup I see something going on in my tests here on your site the following code is added just above the closing body tag when the menu button is pressed to display your off canvas backdrop
<div class="modal-backdrop fade show"></div>
But on my test when I just uploaded a quick canvas page and hit a button I get this for the backdrop
<div class="offcanvas-backdrop fade show"></div>
Also if I edit the class on your site the menu then becomes at the front and works as intended
@gunnery I see your button that triggers the off canvas uses the toggle option on click, I don’t think the onclick should be an issue but you can use this area on the button:
The action toggle here is set to modal this is because i have just used this as a way to produce the same effect your menu has with this as modal you get the
<div class="modal-backdrop fade show"></div>
Which is incorrect just something to check as maybe this is on your button, also you can set the button to toggle a offcanvas here without needing to use dynamic events
So the off-canvas is in the “layout” part and the button is in the “view” part of this NodeJS project, when you have the view part open you can’t select the action toggle as it is not there.
After further testing if I set the back ground to off then there is no issue.
But it seems the background is coming in front of the menu.
I’ve manually added a Z-index = 5000 in the css and now there is no issue and it is working.
Under the normal CSS it was set automatically by Wappler to 1045 so I’m not quite sure what is going on but it seems the background z-index is above the off-canvas.
As soon as I remove the z-index=5000 away, the same old problem.
Z-index are defined by bootstrap per default:
You can override them in theme manager if you need special values and create a custom theme.
yes, it seem thats Z-index is the issue on this one. No sure why it changed though as it was working perfectly in the previous version.