2017-08-29 14 views
0

私はこのリンクのdropdownButton関数を使用していますdrop-down checkbox input in shinyこれはshinyWidgetsにあり、テキストが黒くなるようにわずかに変更されています。dashboard内のdropdownButtonの配置サイドバー

可能な限りdropdownButtonをselectInputドロップダウンのように見せたいと思います。私はcolumn(1)関数を使ってサイドバーに並べるようにしましたが、dropdownButtonの幅をselectInputと同じ幅にします。

は、私はまた、幅= 200とその上のselectInputの同じ幅であることをドロップダウン選択肢の幅を得たが、私は、ドロップダウンボタンも同じ大きさになりたいです。

誰かがdropDownButton関数またはUIを変更する手助けをすることができますか?

あなたは以下のようにあなたの uiコードで cssタグ tags$style(type = 'text/css', ".btn-default{width: 275px;}")追加することによって、そうすることができ
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) 

答えて

2

:あなたはこのような何かを得るのタグを追加することで

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()   
) 

を:

enter image description here

[編集]: 私は遅くなりましたRキャレットが適切な次のように私はさらにCSSタグのカップルを追加することを整列させるために、従ってselectInputの場合のように整列されていなかったことに気づいた。

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()   
) 

追加のタグは、次のように整列するキャレットをもたらした: enter image description here

+0

完璧!これはまさに私が望むものでした。 – SarahGC

+0

それでは、私が今話題にしている問題の1つは、selectInputボタンがウィンドウのサイズに基づいて2つの異なるサイズの間にあるので、ドロップダウンボタンのサイズが反応的であるということです。私は、$ style(type = 'text/css'、 ".btn-default {width:100%;}")というタグを試しましたが、特定のウィンドウサイズでボタンが小さくなり、次のサイドバーアイテムが重なってしまいます。これを修正する方法を知っていますか? – SarahGC

関連する問題