Leaflet Container Items Appear Over Sidebar in page_sidebar()
Closed this issue · 3 comments
When using page_sidebar() with leafletOutput() in a mobile size, the items under class leaflet-control-container appear above the sidebar:
I can resolve this issue manually by setting the z-index of leaflet-container to 0, but obviously this is not ideal.
In general, I preferred the former set up where the sidebar appeared above the main content in mobile environments.
Thanks for reporting this issue @CIOData. I've moved the item over to the bslib repo, since the fix will need to come from here. Most likely, we'll adjust the styles so that the sidebar on mobile has the same z-index as an off-canvas element (in other words the sidebar will get a very high z-index).
Thanks for sharing your feedback about the newer sidebar design. You may be interested to hear that we've just added support for choosing separate sidebar behavior on mobile and desktop devices in #943. Here's the news summary, with more details in the dev docs for the sidebar(open=)
argument:
sidebar() now supports separate choices for the
open
argument on mobile or desktop screens. You can pass a list withmobile
anddesktop
values toopen
to control the sidebar’s initial state on each screen size, choosing from"open"
,"closed"
, or"always"
(for an always-open sidebar that cannot be collapsed). (#943)
https://getbootstrap.com/docs/5.3/layout/z-index/
$zindex-offcanvas: 1045;
This issue has been automatically locked. If you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue.
🙋 Need help? Connect with us on Discord or Posit Community.