search

ericrayanderson / shinymaterial

Other
236 stars 58 forks source link

Adjusting Leaflet z-index #100

Open jasonajones73 opened 4 years ago

jasonajones73 commented 4 years ago

I am trying shinymaterial out for the first time and I absolutely love it! Thank you so much for putting this package together. I am finding that it loads a lot faster than shinydashboard for me.

The project I am working on right now includes leaflet and I noticed that when I open the side navbar, the map controls and attribution were showing up in front of everything. It also occurred with the selectizeInput dropdown menu. Here is a link to an image that should give you an idea of what I am talking about: Image Link

I felt pretty stupid trying to figure out what was going on and finally came across the z-index attribute. It turns out that .leaflet-top, .leaflet-bottom defaults to 1000 which pushes it in front of everything at all times. I don't know if other people are having this issue but I just wanted to bring it to your attention as a potential pain point for people.

I added this code to my shiny application to resolve everything:

tags$head(HTML("<style>* .leaflet-top, .leaflet-bottom { z-index: 888; } </style>"))

Here is a link to an image showing that it corrected: Image Link Corrected

I apologize if this is not a relevant issue. Just wanted to bring this to your attention and share my current fix.

analytichealth commented 4 years ago

Thanks @jasonajones73 that's really helpful