R Shiny dropdownButton reactive size? - css

Question

I'm using the dropdownButton from this link that is in Shiny Widgets, with a slight mod to make the text black. drop-down checkbox input in shiny
My goal is to make the dropdownButton in my sidebar look as much like a selectInput feature as possible. I got the button to be the same size as the the selectInput, and the caret to be placed correctly, thanks to help on another post, but when I change the window size, I run into UI overlap issues.
Any suggestions? See my issue below:
Both are screenshots of the same app from the same code, just different window sizes. I'd like the dropdownButton to stay consistent in matching its size to the selectInput above. I also don't understand why my h5("Filter 2:) text splits with the larger window size, and I don't want it to do that.
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:"))),
tags$style(type = 'text/css', ".btn-default{width: 100%;}"),
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"))
),
h5(strong(("Filter 3:"))),
dropdownButton2(
label = "Filter 3:", status = "default", width = 200,#circle = FALSE,
checkboxGroupInput(inputId = "check3", label = "Choose", choices = c("A","B","C"))
)
)),
dashboardBody()
)
server <- function(input, output){
}
shinyApp(ui = ui, server = server)

Answer 1

#SarahGC - The column you have defined in your code has width = 1 which is being used to display dropdownbuttons. By just changing that value, both your problems will get solved (text wont split on the label, and width of buttons will not be restricted). Please note width must be between 1 and 12.
column(11,
h5(strong("Filter 2:")),
tags$style(type = 'text/css', ".btn-default{width: 100%;}"),
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 = 100,#circle = FALSE,
checkboxGroupInput(inputId = "check1", label = "Choose", choices = c("A","B","C"))
),
h5(strong("Filter 3:")),
dropdownButton2(
label = "Filter 3:", status = "default",width = 100,#circle = FALSE,
checkboxGroupInput(inputId = "check3", label = "Choose", choices = c("A","B","C"))
)
)