CODEWITHSUNDEEP
cssrshiny
Varun
Varun

Reputation: 1321

R Shiny change size and format of dateRangeInput widget

In my Shiny app, I have a dateRangeInput widget that looks like this.

enter image description here

1) I'd like to increase the size of the dates in the boxes and change the text from bold to normal.

2) Also, I would like to increase the space between the widget title and the widget input, so as to increase the height of the (wellPanel). I can control the width using the width function, but cannot seem to modify its height.

I am not an expert in CSS, so I'm having difficulty modifying this.

Here's my attempt from ui.R, that doesn't seem to work.

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

)

Any help will be greatly appreciated!

Upvotes: 0

Views: 2559

Answers (1)

amrrs
amrrs

Reputation: 6325

I've used dateRangeInput's sample code. Two css elements to touch upon.

Updated the code to increase the gap between widget and title:

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) { })
}

Upvotes: 1

Related Questions