Absolute panel in R shiny gets hidden behind the leaflet output

Question

I am trying to make a leaflet map full screen and also add filter controls on top of the map. However, when I try to do this my filter control(absolute panel) gets hidden behind the leaflet output during runtime.

Absolute panel is present when I give width manually

I want the map to be full-screen , when I do it, it gets hidden behind the map.

How can I make the map go behind the absolute panel? Any help is appreciated.

Thanks

Below is the UI code:

fluidPage(style="padding-top: 10px;",
      h1("Locations"),
      absolutePanel(
        top = 60, left = "auto", right = 20, bottom = "auto",
        width = 330, height = "auto",draggable = TRUE,
        wellPanel(
          selectInput("Suburb", "Select one Suburb:",choices = c("Select one Suburb" = "All", as.character(mydata$SuburbTown))),
          uiOutput("secondselection")
          ),
        style = "opacity: 0.65"
          ),

      leafletOutput("leafl", height = "800px")
          )

Hi @Karan, at the moment, the provided code does not suffice to reproduce the behavior you mention. It would help if you could add a [reproducible example](https://stackoverflow.com/questions/48343080/how-to-convert-a-shiny-app-consisting-of-multiple-files-into-an-easily-shareable) to your question. — Florian, May 01 '18 at 06:38
I'm having the same issue since today, after updating all packages (including leaflet) — Forever, May 02 '18 at 01:29

score 8 · Accepted Answer · answered May 01 '18 at 10:17

8

You can change the z-index of your panel to make it work. Try this:

fluidPage(style="padding-top: 10px;",
      h1("Locations"),
      absolutePanel(
        top = 60, left = "auto", right = 20, bottom = "auto",
        width = 330, height = "auto",draggable = TRUE,
        wellPanel(
          selectInput("Suburb", "Select one Suburb:",choices = c("Select one Suburb" = "All", as.character(mydata$SuburbTown))),
          uiOutput("secondselection")
        ),
        style = "opacity: 0.65; z-index: 10;" ## z-index modification
      ),

      leafletOutput("leafl", height = "800px")
)

answered May 01 '18 at 10:17

kluu

2,848
3
15
35

@Forever It worked for me once but after I restarted my app I'm having the same issue. I tried to use it in a .css file as well but no luck – Karan Kumar May 02 '18 at 02:19
@Karan Kumar, try this instead: `z-index: 10 !important ;`. If it does not work, please consider sharing a reproducible example. – kluu May 02 '18 at 04:44
3

@Forever "z-index: 1000;" worked for me as well. Thank you, guys!! – Karan Kumar May 02 '18 at 04:45
1

@kluu [z-index: 10 ! important ;] did not work in css as well but using [z-index: 1000] worked, either you include it in css file or in UI file , it worked both the ways – Karan Kumar May 02 '18 at 04:51

score 0 · Answer 2 · answered Feb 18 '20 at 05:53

just rewrite it, send it top of absolutePanel leafletOutput("leafl", height = "800px")

fluidPage(style="padding-top: 10px;",
  h1("Locations"),
  leafletOutput("leafl", height = "800px"),
  absolutePanel(
    top = 60, left = "auto", right = 20, bottom = "auto",
        width = 330, height = "auto",draggable = TRUE,
        wellPanel(
          selectInput("Suburb", "Select one Suburb:",choices = c("Select one Suburb" = 
"All", as.character(mydata$SuburbTown))),
          uiOutput("secondselection")
          ),`enter code here`
        style = "opacity: 0.65"
              )
      )

Absolute panel in R shiny gets hidden behind the leaflet output

2 Answers2

Linked