CODEWITHSUNDEEP
rshiny
Ruth Newton
Ruth Newton

Reputation: 15

Absolute Panel in Shiny R Semi Transparent

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)

Upvotes: 1

Views: 1812

Answers (1)

lz100
lz100

Reputation: 7340

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)

Upvotes: 1

Related Questions