CODEWITHSUNDEEP
cssruser-interfacedrop-down-menushiny
SarahGC
SarahGC

Reputation: 507

R Shiny dropdownButton reactive size?

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:enter image description here

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)

Upvotes: 0

Views: 1758

Answers (1)

Sagar
Sagar

Reputation: 2914

@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"))
                          )
                   )

Upvotes: 1

Related Questions