1

I am trying to make a shiny app which has an absolute panel over a map- and I want it to be semi transparent grey so that you can still see the map underneath but it's still clear enough to read what's in the panel. Have seen online that it is to do with changing the HTML options, but need some help on what that would be! I've included a basic example below, thanks for any help!

ui <- bootstrapPage(absolutePanel(id = "controls", class = "panel panel-default",
              top = 75, left = 55, width = 250, fixed=TRUE,
              draggable = TRUE, height = "auto",
              tags$i(h6("Test Panel"))))

server = function(input, output, session) {}
shinyApp(ui, server)
Ruth Newton
  • 15
  • 4
  • Does this answer your question? [Absolute panel in R shiny gets hidden behind the leaflet output](https://stackoverflow.com/questions/50110488/absolute-panel-in-r-shiny-gets-hidden-behind-the-leaflet-output) – bretauv Sep 09 '20 at 11:02

1 Answers1

1

I use a plot to pretend your map. You only need to change the background-color to a color you want and change the opacity for transparency.

I also added the :hover for you. When your mouse is not on the panel, 50% transparency. When you move your mouse over the panel, it becomes not transparent.

ui <- bootstrapPage(
    tags$style("
        #controls {
          background-color: #ddd;
          opacity: 0.5;
        }
        #controls:hover{
          opacity: 1;
        }
               "),
    absolutePanel(id = "controls", class = "panel panel-default",
                  top = 75, left = 55, width = 250, fixed=TRUE,
                  draggable = TRUE, height = "auto",
                  tags$i(h6("Test Panel")),
                  h6("Test Panel"),
                  h6("Test Panel")
    ),
    plotOutput("plot1")
)

server = function(input, output, session) {
    output$plot1 <- renderPlot({
        plot(mtcars$wt, mtcars$mpg)
    })
}
shinyApp(ui, server)
lz100
  • 6,990
  • 6
  • 29