How to change the style/display of dateRangeInput with R/Shiny? - r

Question

[Edit]
I tried to simplify my code as much as possible:
server.R :
server <- function(input, output, session) {
output$body_UI<-renderUI({
tabPanel("Comparison",
{
fluidPage(
fluidRow(
box(
width=12,
solidHeader=T,
title="Parameters",
status="primary",
uiOutput('date_range_UI')
)
)
)
}
)})
output$date_range_UI <-renderUI({
dateRangeInput(
"date_1",
"Period 1",
start=NULL,
end=NULL
)
})
}
ui.R:
uiHeader <- dashboardHeader(title = NULL)
uiSidebar <- dashboardSidebar(sidebarMenuOutput('sidebar_UI'))
uiBody <- dashboardBody(
tags$head(
tags$style(type="text/css"
),
tags$link(rel = "stylesheet", type = "text/css", href = "style_v2.css")
),
uiOutput('body_UI')
)
dashboardPage(uiHeader,
uiSidebar,
uiBody,
skin = "black")
I think that my problem comes from the file style_v2.css :
.progress-bar, .irs-bar,.irs-bar-edge, .irs-from, .irs-to, .irs-single{
background-color:#000033;
}
.box.box-solid.box-primary>.box-header
{
background-color:#000033;
}
.box.box-solid.box-primary{
border: 1px solid #000033;
}
.box.box-primary, .nav-tabs-custom>.nav-tabs>li.active
{
border-top-color:#000033;
}
body {
background-color: #fff;
}
.content-wrapper, .right-side{
background-color:#FFFFFF;
}
.dropdown-menu{
background-color:#333;
}
This file is located in the folder 'www' which is in the same directory than server.R and ui.R.
If I delete this file, then I have no problem. But I need it and I don't know which part is causing this.
I'm trying to insert a period field using dateRangeInput (Shiny).
But I'm having problems in the display.
NB: I encounter the same problem using dateInput.
Here is an extract of server.R:
dateRangeInput(
"date_1",
"Period 1",
start=min(data$Date_processed),
end=""
)
This is completely illegible...

Answer 1

The issue is with this piece of code in your style_v2.css file:
.dropdown-menu {
background-color: #333;
}
#333 is the dark background you are seeing. You can either remove this or edit the hex colour to be lighter.
If that code is necessary for other dropdowns in your code you can be more specific regarding your css - let me know.