R Shiny更改dateRangeInput小部件的大小和格式

时间:2017-10-04 08:13:43

标签: css r shiny

在我的Shiny应用程序中,我有一个dateRangeInput小部件,看起来像这样。

enter image description here

1)我想增加框中日期的大小,并将文字从粗体更改为正常。

2)另外,我想增加小部件标题和小部件输入之间的空间,以便增加(wellPanel)的高度。我可以使用width函数控制宽度,但似乎无法修改其高度。

我不是CSS的专家,所以我很难修改它。

这是我ui.R的尝试,似乎无效。

column(wellPanel(
tags$style(type='text/css', ".selectize-input { font-size: 20px; line-height: 24px;}"),
dateRangeInput("inp_pg1daterange", 
               label = paste('Date range selection'),
               start = min(results_combined$Date),
               end = max(results_combined$Date), 
               separator = " - ", 
               weekstart = 1

)

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:1)

我已使用dateRangeInput的示例代码。要触摸的两个css元素。

更新了代码以增加小部件和标题之间的差距:

enter image description here

if (interactive()) {

  ui <- fluidPage(

    tags$title('This is my page'),

    tags$style('.input-sm {font-size: 16px; } label {font-weight: 500; margin-bottom: 15px; }'),

    dateRangeInput("daterange1", "Date range:",
                   start = "2001-01-01",
                   end   = "2010-12-31"),

    # Default start and end is the current date in the client's time zone
    dateRangeInput("daterange2", "Date range:"),

    # start and end are always specified in yyyy-mm-dd, even if the display
    # format is different
    dateRangeInput("daterange3", "Date range:",
                   start  = "2001-01-01",
                   end    = "2010-12-31",
                   min    = "2001-01-01",
                   max    = "2012-12-21",
                   format = "mm/dd/yy",
                   separator = " - "),

    # Pass in Date objects
    dateRangeInput("daterange4", "Date range:",
                   start = Sys.Date()-10,
                   end = Sys.Date()+10),

    # Use different language and different first day of week
    dateRangeInput("daterange5", "Date range:",
                   language = "de",
                   weekstart = 1),

    # Start with decade view instead of default month view
    dateRangeInput("daterange6", "Date range:",
                   startview = "decade")
  )

  shinyApp(ui, server = function(input, output) { })
}