css - R Shiny dropdownButton react 大小？

Question

我正在使用 Shiny Widgets 中此链接中的 dropdownButton，并使用轻微的 mod 使文本变黑。 drop-down checkbox input in shiny

我的目标是使侧边栏中的 dropdownButton 看起来尽可能像 selectInput 功能。多亏了另一篇文章的帮助，我得到了与 selectInput 相同大小的按钮，并且正确放置了插入符号，但是当我更改窗口大小时，我遇到了 UI 重叠问题。

有什么建议吗？请参阅下面的问题:

两者都是来自相同代码的同一应用程序的屏幕截图，只是窗口大小不同。我希望 dropdownButton 在将其大小与上面的 selectInput 相匹配时保持一致。我也不明白为什么我的 h5("Filter 2:) 文本会随着较大的窗口大小拆分，我不希望它这样做。

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 - 您在代码中定义的 column 具有 width = 1，用于显示 dropdownbuttons。只需更改该值，您的两个问题都将得到解决(文本不会在标签上拆分，并且按钮的宽度不会受到限制)。请注意 width 必须在 1 到 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"))
                          )
                   )