dropdownButton alignment within dashboardSidebar

Question

I'm using the dropdownButton function from this link drop-down checkbox input in shiny that is in shinyWidgets, with a slight modification so that the text is black.

I want the dropdownButton to look like the selectInput drop down I have above it as much as possible. I got them to line up in the sidebar with column(1,) function, but I also want the width of the dropdownButton to be the same width as the selectInput.

I also got the width of the dropdown choices to be the same width of the selectInput above it with width=200, but I want the dropdown button to also be the same size.

Can someone help me modify the dropDownButton function or my UI so that this is the case?

library(shiny)
library(shinydashboard)


dropdownButton2 <- function(label = "", status = c("default", "primary", "success", "info", "warning", "danger"), ..., width = NULL) {

  status <- match.arg(status)
  # dropdown button content
  html_ul <- list(
    class = "dropdown-menu",
    style = if (!is.null(width)) 
      paste0("width: ", validateCssUnit(width), ";"),
    lapply(X = list(...), FUN = tags$li, style = "margin-left: 10px; margin-right: 10px;color:black")
  )
  # dropdown button apparence
  html_button <- list(
    class = paste0("btn btn-", status," dropdown-toggle"),
    type = "button", 
`    data-toggle` = "dropdown"
  )
  html_button <- c(html_button, list(label))
  html_button <- c(html_button, list(tags$span(class = "caret")))
  # final result
  tags$div(
    class = "dropdown",
    do.call(tags$button, html_button),
    do.call(tags$ul, html_ul),
    tags$script(
  "$('.dropdown-menu').click(function(e) {
  e.stopPropagation();
});")
  )
  }

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(width = 325,
               selectInput('month',label='Filter 1:',choices= month.name,multiple = FALSE,selected = "March"),
               br(),
               column(1,
               h5(strong(("Filter 2:"))),
               dropdownButton2(
                 label = "Filter 2:", status = "default", width = 200,#circle = FALSE,
                 checkboxGroupInput(inputId = "check1", label = "Choose", choices = c("A","B","C"))
               )
                 )),
  dashboardBody()         
  )

server <- function(input, output){
}

shinyApp(ui = ui, server = server)

SBista · Accepted Answer · 2017-08-30T13:08:10.680

You can do so by adding the css tag tags$style(type = 'text/css', ".btn-default{width: 275px;}") in your ui code as below:

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(width = 325,
                     selectInput('month',label='Filter 1:',choices= month.name,multiple = FALSE,selected = "March"),
                     br(),
                     column(1,
                            h5(strong(("Filter 2:"))),
                            tags$style(type = 'text/css', ".btn-default{width: 275px;}"),
                            dropdownButton2(
                              label = "Filter 2:", status = "default", width = 200,#circle = FALSE,
                              checkboxGroupInput(inputId = "check1", label = "Choose", choices = c("A","B","C"))
                            )
                     )),
    dashboardBody()         
  )

On adding the tag you get something like this:

[EDIT]: I later realized that the caret was not right aligned as in the case of selectInput hence to align that I further added couple of css tags as follows:

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(width = 325,
                     selectInput('month',label='Filter 1:',choices= month.name,multiple = FALSE,selected = "March"),
                     br(),
                     column(1,
                            h5(strong(("Filter 2:"))),

                            tags$style(type = 'text/css', ".btn-default{width: 275px;}"),
                            tags$style(type = 'text/css', ".btn .caret{position: relative;}"),
                            tags$style(type = 'text/css', ".caret{top: 45%; right:-35%}"),
                            dropdownButton2(
                              label = "Filter 2:", status = "default", width = 200,#circle = FALSE,
                              checkboxGroupInput(inputId = "check1", label = "Choose", choices = c("A","B","C"))
                            )
                     )),
    dashboardBody()         
  )

The additional tags resulted the caret to be aligned as follows:

So one issue I'm coming accross now is that I'd rather the size of the drop down button be reactive, since the selectInput button is goes between two different sizes based on the size of the window. I tried tags$style(type = 'text/css', ".btn-default{width: 100%;}"), but at certain window sizes the button gets small and the next sidebar item overlaps it... would you know how to fix this? — SarahGC, Aug 30 '17 at 15:17

dropdownButton alignment within dashboardSidebar

1 Answers1