在R闪亮中增加DateRangeInput和对齐的高度

时间:2018-01-10 10:31:01

标签: css r shiny shinydashboard

我需要使用下面的 R 脚本来满足以下要求。当您单击顶部的侧栏符号时,当仪表板主体展开时,所有小部件都在一行中,但是当仪表板主体缩小时,dateRangeInput小部件将显示在下面的行中。我希望所有小部件都出现在一行中并相应地调整大小。请帮助和谢谢。

## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
box(title = "Data", fluidPage(

  div(style = "display: inline-block;vertical-align:top; width: 600 px;", 
selectInput("select1","select1",c("A1","A2","A3")),selected = "A1"),
  div(style = "display: inline-block;vertical-align:top; width: 600 px;", 
selectInput("select2","select2",c("A3","A4","A5")),selected = "A3"),
  div(style = "display: inline-block;vertical-align:top; width: 600 px;", 
selectInput("select2","select2",c("A3","A4","A5")),selected = "A3"),
  div(style = "display: inline-block;vertical-align:top; width: 600 px;", 
selectInput("select2","select2",c("A3","A4","A5")),selected = "A3"),
div(style = "display: inline-block;vertical-align:top; width: 600 px;",   
dateRangeInput("daterange1", "Date range:",

start = "2001-01-01",

end   = "2010-12-31")
),
status = "primary", solidHeader = T, width = 12, height = 120)
)
))
server <- function(input, output) { }
shinyApp(ui, server)

Snapshot Capture

1 个答案:

答案 0 :(得分:0)

你的一些代码是关闭的,以至于你甚至没有看到你输入的方框。

除此之外:你有点风格的div对于实现你想要的东西没有用。您可以浏览 Fluid Grid 上的shiny layout guide部分,通过使用正确的闪亮优惠功能来探索样式的可能性。

对于daterange小部件中的高度问题:选择的最小高度为34像素。如果您也将它应用于按css对对象进行日期排列,则可以使它们具有相同的大小。

更正后的代码:

## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    box(title = "Data", status = "primary", solidHeader = T, width = 12,
      fluidPage(
        fluidRow(
          column(2, selectInput("select1","select1",c("A1","A2","A3"), selected = "A1")),
          column(2, selectInput("select2","select2",c("A3","A4","A5"), selected = "A3")),
          column(2, selectInput("select2","select2",c("A3","A4","A5"), selected = "A3")),
          column(2, selectInput("select2","select2",c("A3","A4","A5"), selected = "A3")),
          column(4, dateRangeInput("daterange1", "Date range:", start = "2001-01-01",end = "2010-12-31")),
          tags$head(
            tags$style("
              .input-daterange input {
                min-height: 34px;
              }
            ")
          )
        )
      )
    )
  )
)
server <- function(input, output) { }
shinyApp(ui, server)