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")
          )

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")
          )

• javascript
• css
• r
• shiny

Share Improve this question Follow edited May 1, 2018 at 5:04 Marcus Campbell 2,82644 gold badges2525 silver badges3737 bronze badges asked May 1, 2018 at 1:59 Karan KumarKaran Kumar 4311 silver badge44 bronze badges 2

• 1 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 to your question. – Florian Commented May 1, 2018 at 6:38
• 1 I'm having the same issue since today, after updating all packages (including leaflet) – Forever Commented May 2, 2018 at 1:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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")
)

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"
              )
      )