offCanvas Backdrop wrong z index

  • Resolved tegsheee

    (@tegsheee)


    10 months, 1 week ago

    Hello,
    I have been having an issue with the offcanvas block. When i activate the backdrop, it s being shown over the offcanvas itself. I have checked the HTML. The backdrop has modal-backdrop class, which has higher z index than the offcanvas. The modal-backdrop has 1050 and the offcanvas has 1045. Is there a way to address this issue?
    Cheers

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter tegsheee

    (@tegsheee)

    I have found where the problem is. In “all-bootstrap-blocks/src/scss/bootstrap-5.0.2/_offcanvas.scss” the offcanvas-backdrop class has wrong values. 

    .offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  width: 100vw;
  height: 100vh;
  background-color: $modal-backdrop-bg;

  // Fade for backdrop
  &.fade { opacity: 0; }
  &.show { opacity: $modal-backdrop-opacity; }
}

    here it should be offcanvas-backdrop. But it is currently somehow modal.
    The offcanvas works fine with other bootstrap versions.
    It would be helpful if it s fixed, as the version 5.0.2 is the default.

    Plugin Author Miles

    (@areoimiles)

    Hi @tegsheee,

    Thanks for reaching out. Apologies for the late reply!

    I’ve had a look into this. So, in Bootstrap v5.0.2 they didn’t have a specific offcanvas backdrop, instead they used the default modal backdrop when the offcanvas was opened. The code that you’ve highlighted was an attempt to introduce a specific offcanvas-backdrop. Unfortunately, we weren’t able to get this to work so that code actually doesn’t get used.

    In later versions of Bootstrap they added a specific offcanvas backdrop with it’s own z-index variable $zindex-offcanvas-backdrop which has a default value of 1040 and they updated the $zindex-modal-backdrop to 1050.

    I have tested the default 5.0.2 functionality and I am unable to recreate your issue. You can see an example on here https://allbootstrapblocks.com/all-bootstrap-blocks/features/components/ when you scroll down to offcanvas you’ll see the backdrop works as expected. This is using the default Bootstrap variables with 5.0.2.

    This suggest the issue may be more specific to your setup. There are a couple of options you can try to resolve your issue at your end:

    Firstly, if you have switched between different versions of Bootstrap, make sure you have clicked the Save & Recompile button within the Bootstrap settings tab. It may be that some styles from a different version of Bootstrap are being used and running this will recompile the CSS based on the selected version.

    The other option is to switch to a newer version of Bootstrap, where they have decoupled the modal backdrop and the offcanvas backdrop.

    Finally, if none of the above resolve your issue you can manually override either the $zindex-modal-backdrop variable and the $zindex-offcanvas variable by going into the WordPress dashboard, clicking Bootstrap in the left hand menu then selecting Components > Z-Index. You should see these options, once you update them make sure you save and recompile the CSS.

    One other thing to think about is when you add an offcanvas it will add it to the page wherever you insert it, whereas the backdrop gets automatically appended to the <body> this is an important factor as if you add your offcanvas within a parent element that also has a z-index then the offcanvas will automatically take the parents z-index, whereas the backdrop will use the correct one. So, it’s probably worth double checking that none of the offcanvas parent elements have a z-index set that could be causing the issue.

    Hopefully this all makes sense and helps you resolve the issue. However, if it doesn’t please feel free to reach back out and I will do my best to help. If this is the case it would be useful if you could provide a link to an example as it would make it easier for me to debug.

    I’m going to mark this as resolved, but please feel free to open the ticket back up if the above doesn’t resolve your issue. Thanks again for reaching out!

    Thanks
    Miles

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘offCanvas Backdrop wrong z index’ is closed to new replies.