Increasing the height of the DateRangeInput and alignment in R shiny

Question

I need the following requirement with the R script below. When you click on the sidebar symbol at the top, when dashboard body expands, all widgets are in one line, however when the dashboard body shrinks, the dateRangeInput widget appears in the below line. I want all widgets to appear in one line and resize accordingly. Please help and thanks.

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

Answer 1

Some of your code was off such that one didnt even see the box around your inputs.

Besides that: You're somewhat styled divs were not useful in achieving what you desired. Feel free to browse through the shiny layout guide section on the Fluid Grid to explore what possibilities in styling you have by just using the right functions shiny offers.

For the height issue in daterange widgets: The selects have a min-height of 34 pixels. If you also apply that to daterange objects by css, you can have them be the same size.

Corrected code below:

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