R Shiny dropdownButton反應大小？

Question

我在使用Shiny Widgets中的鏈接使用dropdownButton，並使用輕微的Mod使文本變黑。 drop-down checkbox input in shiny

我的目標是讓側邊欄中的dropdownButton看起來儘可能像selectInput特性。我得到的按鈕與selectInput的大小相同，並且插入符號被正確放置，這要感謝其他帖子的幫助，但是當我更改窗口大小時，我遇到了UI重疊問題。

有什麼建議嗎？看到我的問題如下：

這兩個都是從相同的代碼，只是不同的窗口大小的同一個應用程序的屏幕截圖。我希望dropdownButton保持一致，將其大小與上面的selectInput相匹配。我也不明白，爲什麼我的H5（「過濾器具有較大的窗口大小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您在定義您的代碼正在被用來顯示dropdownbuttonswidth = 1。只需更改該值，無論是你的問題將得到解決（文本不會拆標籤，並寬度按鈕將不會受到限制）。請注意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")) 
         ) 
        )