CODEWITHSUNDEEP
cssrshiny
Bangyou
Bangyou

Reputation: 9816

Background in shiny absolutePanel

I want to set the background of absolutePanel as transparent, but all controls in the panel as normal.

A css style is added through tags$style, but all child controls become as transparent. How should I achieve this?

PS: My css codes below don't work

library(shiny)
ui <- shinyUI(

    fluidPage(
        tags$head(tags$style(
        HTML('
             #input_date_control {opacity : 0;}
             #sel_date {opacity: 1;}')
    )),
        absolutePanel(
        sliderInput('sel_date', NULL, 0, 5, 5, width = '80%')
        , id = "input_date_control", class = "panel panel-default", fixed = TRUE
        , draggable = FALSE, top = 'auto', left = '20', right = 'auto', bottom = 20
        , width = '60%', height = 'auto'
    )))

server <- function(input, output, session) {

}

shinyApp(ui, server)

Upvotes: 3

Views: 5055

Answers (1)

Bangyou
Bangyou

Reputation: 9816

Following suggestion in this page: I do not want to inherit the child opacity from the parent in CSS, I solved my problem 

library(shiny)
ui <- shinyUI(

    fluidPage(
        tags$head(tags$style(
        HTML('
             #input_date_control {background-color: rgba(0,0,255,0.2);;}
             #sel_date {background-color: rgba(0,0,255,1);}')
    )),
        absolutePanel(
        sliderInput('sel_date', NULL, 0, 5, 5, width = '80%')
        , id = "input_date_control", class = "panel panel-default", fixed = TRUE
        , draggable = FALSE, top = 'auto', left = 30, right = 'auto', bottom = 10
        , width = '60%', height = 'auto'
    )))

server <- function(input, output, session) {

}

shinyApp(ui, server)

Upvotes: 2

Related Questions