dropdownButton对准内dashboardSidebar

我使用的dropdownButton功能从这个链接drop-down checkbox input in shiny即在shinyWidgets，有轻微的修改，使得文字为黑色。dropdownButton对准内dashboardSidebar

我想dropdownButton看起来像selectInput下拉我把它上面尽可能多地。我让他们在列（1，）函数的边栏中排队，但我也希望dropdownButton的宽度与selectInput的宽度相同。

我也得到了下拉选择的宽度是其上方的selectInput与宽度= 200的宽度相同，但我想下拉按钮也具有相同的尺寸。

人可以帮我修改dropDownButton功能或我的界面，因此这种情况？

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:"))), 
       dropdownButton2(
       label = "Filter 2:", status = "default", width = 200,#circle = FALSE, 
       checkboxGroupInput(inputId = "check1", label = "Choose", choices = c("A","B","C")) 
       ) 
       )), 
    dashboardBody()   
) 

server <- function(input, output){ 
} 

shinyApp(ui = ui, server = server)

来源

2017-08-29 SarahGC

你可以在你的ui代码添加css标签tags$style(type = 'text/css', ".btn-default{width: 275px;}")如下这样做：

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: 275px;}"), 
          dropdownButton2(
           label = "Filter 2:", status = "default", width = 200,#circle = FALSE, 
           checkboxGroupInput(inputId = "check1", label = "Choose", choices = c("A","B","C")) 
          ) 
        )), 
    dashboardBody()   
)

在其上添加标签，你得到的东西是这样的：

[编辑]： 我迟到[R意识到插入符号是不正确如在selectInput因此这种情况排列对齐，我再补充几个CSS标签如下：

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: 275px;}"), 
          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")) 
          ) 
        )), 
    dashboardBody()   
)

附加标签也带来插入符如下排列：

来源

2017-08-30 11:24:13 SBista

完美！这正是我想要的。 – SarahGC

所以一个问题，现在我来了防空火炮的是，我宁愿下拉按钮的大小是被动的，因为selectInput按钮是一个基于窗口的大小两种不同尺寸之间去。我尝试过标记$ style（type ='text/css'，“.btn-default {width：100％;}”），但是在某些窗口大小的按钮变小，下一个侧边栏项重叠它...你会知道如何解决这个问题？ – SarahGC

dropdownButton对准内dashboardSidebar

回答

相关问题