shinywidget dropdownButton CSS tag

Question

I'm using the dropdownButton widget but i'm struggling with the css. I have tried this:

dropdownButton(inputId = "MyDropDownB1",
   tags$div(style = "background-color: #393D3F !important;",
        checkboxGroupInput(...)
        ),
        circle = F, status = "info", icon = icon("gear"), width = "300px",
        label="Recruitment"
      )

that changes the color of the panel but i still have white margins.

I would like to have all the css in a specific .css file rather than in the tag$div. Which is the tag that I should use in my .css file to target the dropdownButton button and panel?

Sorry, what are you trying to change? – amrrs Feb 28 '19 at 08:44 — amrrs, Feb 28 '19 at 08:44

score 2 · Answer 1 · answered Feb 28 '19 at 08:57

I used an example code from shinyWidgets as you've not shared any MWE

#dropdown-menu-MyDropDownB1 the one you've to target in your css. As you can see this is based on the id name that you've given in your dropdownButton

# NOT RUN {
## Only run examples in interactive R sessions
if (interactive()) {

  library(shiny)
  library(shinyWidgets)

  ui <- fluidPage(
    tags$head(tags$style(HTML("#dropdown-menu-MyDropDownB1 {
                      background-color: #393D3F !important;}
               ")))
    , 

      dropdownButton(inputId = "MyDropDownB1",

                              checkboxGroupInput("icons", "Choose icons:",
                                                 choiceNames =
                                                   list(icon("calendar"), icon("bed"),
                                                        icon("cog"), icon("bug")),
                                                 choiceValues =
                                                   list("calendar", "bed", "cog", "bug")

                     ),
                     circle = F, status = "info", icon = icon("gear"), width = "300px",
                     label="Recruitment"
      ),

    tags$div(style = "height: 140px;"), # spacing
    verbatimTextOutput(outputId = "out"),
    verbatimTextOutput(outputId = "state")
  )

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

    output$out <- renderPrint({
      cat(
        " # n\n", input$n, "\n",
        "# na\n", input$na
      )
    })

    output$state <- renderPrint({
      cat("Open:", input$mydropdown_state)
    })

  }

  shinyApp(ui, server)

}
# }

hi @amrrs , could help me with this https://stackoverflow.com/questions/59233401/in-r-how-to-create-multilevel-radiogroupbuttons-as-each-level-depends-choicena?noredirect=1#comment104681894_59233401 — John Smith, Dec 08 '19 at 15:10
this tag does not work with dropdown from shinywidgets. it does not let me modify the content, to display the content to the left instead to the right. — Corina Roca, Feb 10 '22 at 20:52

shinywidget dropdownButton CSS tag

1 Answers1

Linked