8000
Modal backgrounds on preview's modals page obscure other important page elements · Issue #2309 · tabler/tabler · GitHub
More Web Proxy on the site http://driver.im/
You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Several important page elements on the preview modals page are obscured by the containers that wrap each of the live modal examples on the page. These modal containers have a z-index that evaluates to 1055, set by Bootstrap at /core/node_modules/bootstrap/scss/_modal.scss. The page elements that this obscures include:
Top navigation bar menu items, whose z-index evaluates to 1030. When the dropdown menu items in the top navigation bar are expanded, they end up appearing behind the live modal examples on the page.
navbar menu items z-index set here:
(On smaller-screen devices such as mobiles): the new theme settings sidepanel and the button in the bottom left hand corner of the page that triggers it, whose z-indexes evaluate to 1045 and 1030 respectively.
sidepanel's offcanvas z-index set by Bootstrap at /core/node_modules/bootstrap/scss/_offcanvas.scss and trigger button's z-index set here:
It would make sense to me that rather than making the modals visible on page load, they are initially hidden. Then, they are only made visible on clicking buttons - upon which, the background/backdrop covers the whole screen.
If it's preferred to keep the modals visible on page load, then the z-indexes of the preview's modals and/or of the elements they conflict with will need adjusting.
ethancrawford
changed the title
[BUG] Top navigation bar items obscured on preview's modals page
Modal backgrounds on preview's modals page obscure other important page elements
May 1, 2025
Uh oh!
There was an error while loading. Please reload this page.
Browser
N/A
OS
N/A
Screen size
N/A
Describe the bug
Several important page elements on the preview modals page are obscured by the containers that wrap each of the live modal examples on the page. These modal containers have a z-index that evaluates to 1055, set by Bootstrap at
/core/node_modules/bootstrap/scss/_modal.scss. The page elements that this obscures include:navbar menu items z-index set here:
tabler/core/scss/layout/_navbar.scss
Line 103 in e675389
sidepanel's offcanvas z-index set by Bootstrap at
/core/node_modules/bootstrap/scss/_offcanvas.scssand trigger button's z-index set here:tabler/core/scss/ui/_buttons.scss
Line 186 in e675389
It would make sense to me that rather than making the modals visible on page load, they are initially hidden. Then, they are only made visible on clicking buttons - upon which, the background/backdrop covers the whole screen.
If it's preferred to keep the modals visible on page load, then the z-indexes of the preview's modals and/or of the elements they conflict with will need adjusting.
How to reproduce
Top navigation conflict:
Theme sidepanel conflict:
Screenshots
JSFiddle
No response
The text was updated successfully, but these errors were encountered: