4

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

2 Answers 2

Reset to default

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

7

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")
)
4
  • @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 May 2, 2018 at 2:19
  • @Karan Kumar, try this instead: z-index: 10 !important ;. If it does not work, please consider sharing a reproducible example.
    – kluu
    May 2, 2018 at 4:44
  • 3
    @Forever "z-index: 1000;" worked for me as well. Thank you, guys!! May 2, 2018 at 4: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 May 2, 2018 at 4:51
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.