R光沢のあるドロップダウンボタンの反応サイズ？

Question

Shiny WidgetsにあるこのリンクのdropdownButtonを使用していますが、テキストを黒くするための少しの変更があります。 drop-down checkbox input in shiny

私の目標は、サイドバーのdropdownButtonをできるだけselectInputのように見せることです。ボタンをselectInputと同じサイズにし、別のポストの助けを借りて、キャレットを正しく配置するようにしましたが、ウィンドウサイズを変更すると、UIオーバーラップの問題が発生します。

提案がありますか？下記の私の問題を参照してください：

両方とも、同じコードの同じアプリのスクリーンショットです。ウィンドウサイズは異なります。上記のselectInputとサイズを一致させるためにdropdownButtonの一貫性を維持したいと思います。 。あなたが定義したcolumn - なぜ私の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また、私は理解していませんあなたのコードはdropdownbuttonsを表示するために使用されているwidth = 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")) 
         ) 
        )