How do you change the font size of a dateInput item
dateInput("MyDate", "Date:", value = "2018-01-01"),
I am using
shinyUI(navbarPage(
tags$head(
tags$style(HTML("
#import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700');
.selectize-input { font-size: 12px; line-height: 14px;}
.selectize-dropdown { font-size: 12px; line-height: 14px; }
.input-sm {font-size: 12px; }
"))
),tabPanel("MyPanel",
column(1,
wellPanel(
dateInput("MyDate", "Date:", value = "2018-01-01"),
Well, long time passed, maybe still someone will find it useful, I've managed to achieve the desired result using tags$head and tags$style and pointing to specific input by its id:
tags$head(
tags$style(HTML("#MyDate [type = 'text'] {fontsize:12px;height:14px;}"))
)
Effectively, you are changing the format of the inputs, restricting the range of affected elements by pointing to a specific ID (#MyDate), thereby solving the problem that bk18 has mentioned.
I myself have just started exploring Shiny, so this might not be the most efficient/elegant solution.
A simple solution is to change the h_ label in the code, e.g h1,h2,h3....and so on.
dateInput("MyDate", label = h2("My Date"), format="mm-dd-yyyy",value = "2018-
01-01")
You can also control width= in this argument as well
In your tags, try:
tags$head(
tags$style(
".form-control {font-size: 2em !important;}"
)
)
This will make all the input text huge. The interesting thing is that the inputs all share the same class according to css, and changing the column container class doesn't seem to work. My answer above should work, but it won't be specific to the date input. I'll try to work it out, but in the meantime try the above!
Related
I actually want something similar as posted here
Change background color of tabPanel when it is active or hover over in Shiny
instead of navbarpage i want to use navlistpanel.
I have two annoying issues regarding the layout of my Dashboard. I added a picture to show what i mean. The default is this blueish colour, but i would like it to be red as a background and the color white as font. Now I kind of managed to do so, but still if you are standig/selecting the topic test1 then it's blue. How can i change or fix this?
Next thing, preferably I want to have test1 and then a submenu right below test 1 to do the filtering. Then i call that filters, and then i would like to add the two filters group variable and filter op datum.
Can anyone please help me out!
Now the filters are positioned are positioned outside the navlistpanel.
Kind regards,
Steffie
navlistPanel(well = FALSE,
tabPanel(new="", windowTitle="Test",
h4(id = "new","Test"),
tags$style("#new{color: white; background-color: #d52b1e;}"),
fluidRow(
# column(1), ## this put an extra space, dont like the look
column(2,
sidebarMenu(
uiOutput("groups")),
),
# fluidRow(
# column(2,offset = 1),
column(3,
sidebarMenu(
dateRangeInput('dateRange',
label = 'Filter op datum',
start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
)
),
),
We can use css to change the colour of the navigation pills when selected. Place the css tags in the fluidpage using tags$head. To have options under a tab panel use navbarMenu and place the tabPanel calls with the navbarMenu call.
With regards to your questions in the comments, you originally set WELL=FALSE in your navlistPanel call. If you set it to TRUE, a box is placed around the navlistPanel bar. To change the background colour of this, we again make use of CSS, using the .well property. With this you can change font size, font, font color, background color, maximum width and height of the navlistPanel and so much more.
What does the syntax mean? Most of it is quite intuitive. I recommend changing some of the values like font-family to see what's actually going on. Also make use of the css tag right here on Stackoverflow. You can also learn more about css here.
library(shiny)
library(shinydashboard)
library(shinythemes)
ui <- fluidPage(
tags$head(tags$style(HTML(".nav.nav-pills.nav-stacked > .active > a, .nav.nav-pills.nav-stacked > .active > a:hover {
background-color: #d52b1e;
}
.well {
min-height: 20px;
max-width: 200px;
padding: 19px;
margin-bottom: 20px;
background-color: #2c3e50;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
font-family: 'Rock Salt', cursive;
}
"))),
navlistPanel(well = TRUE,
navbarMenu("Tests",
tabPanel("Test1",
fluidRow(
# column(1), ## this put an extra space, dont like the look
column(2,
sidebarMenu(
uiOutput("groups")),
),
# fluidRow(
# column(2,offset = 1),
column(3,
sidebarMenu(
dateRangeInput('dateRange',
label = 'Filter op datum',
start = as.Date('2019-01-01') , end = as.Date('2019-12-31')
)
),
)
)
),
tabPanel("Test 2",
"UI elements here")
),
tabPanel("Other",
"UI elements here")
)
)
server <- function(input, output){}
shinyApp(ui, server)
Shiny makes use of the ion-rangeslider. I figured out how to modify some of its attributes. The code below changes the button color and the background color of the label above the button, and also removes the slider bar. I need to make additional changes, but am not sure which other slider attributes I can change--and how they should be referred to.
Is there a comprehensive list of this slider's attributes (such as ".irs-slider") and their properties? (E.g., for the attribute .irs-slider: "width"; "height"; "top"; "background", etc.)
Update: GJPLatten's suggestion to right-click the slider in the browser and select "Inspect Element" saved my day. However, I'm still interested in finding a comprehensive list of attribute and property names which also provides descriptive information, since this would be easier to navigate and work with.
library(shiny)
ui <- fluidPage(
sliderInput("default",
"Default slider",
min = 0,
max = 50,
value = 20),
sliderInput("modified",
"Modified slider",
min = 0,
max = 50,
value = 20),
tags$style(type = "text/css",
HTML(".js-irs-1 .irs-slider { width: 8px; height: 20px; top: 20px; background: green }",
".js-irs-1 .irs-bar { display: none }",
".js-irs-1 .irs-bar-edge { display: none }",
".js-irs-1 .irs-single { color: black; background: transparent }"))
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
The parts within the HTML() function are all css. W3schools have a great tutorial on this at https://www.w3schools.com/css/default.asp. You can get the element name by right clicking on the element in your browser and clicking inspect element.
I have changed the height of my daterangeInput box but cannot figure out how to get the separator box sized to match.
I used RNotebook to generate the HTML for my code and suspect that this line may hold the key:
to
I tried adding .input-group-addon{height: 22px} - this did not help.
library(shiny)
ui <-
fluidPage(
tags$style(type='text/css', ".form-control {height: 22px;font-size: 12px;}")
dateRangeInput('dateRange',label = "Date Range",start = "2009-01-01", end =" 2010-01-01"))
server <- function(input, output) {}
shinyApp(ui, server)
Imgur
Try this:
.input-daterange .input-group-addon {
height: 22px;
font-size: 10px;
line-height: normal;
}
i'm trying to figure out a way to get an actionButton to change color (and possibly other style elements as well.)
The objective is very general and I'll use this for many button responses throughout my complex shinyDashboard App. Simply said: if a button is clicked, or a specific element (i.e. inputslider) changes that is linked to a button, the button should change color.
I usually code my buttons in Shiny like this one:
actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"),
style = "color: white;
background-color: #35e51d;
position: relative;
left: 3%;
height: 35px;
width: 35px;
text-align:center;
text-indent: -2px;
border-radius: 6px;
border-width: 2px")),
I've been browsing my ass off, but no luck to something that works.
I have been looking at shinyjs by #Dean Attali to do this, but I can only get it to work to change the background of the printed text as in the example below. The part using ToggleClass or AddClass doesn't work for actionButton("x", "y") it seems.
I've also tried to use updateActionButton from the shiny package itself, but this does not seem to allow style = "..." to be included in the command.
library(shiny)
library(shinyjs)
library(shinyBs)
if (interactive()) {
shinyApp(
ui = fluidPage(
useShinyjs(),
inlineCSS(list(.red = "background: red")),
inlineCSS(list(.blue = "style = 'background-color: blue'")),
actionButton("checkbox", "Make it red"),
bsButton("checkbox2", "Make me blue"),
p(id = "element", "Watch what happens to me")
),
server = function(input, output) {
observe({
toggleClass(id = "element", class = "red",
condition = input$checkbox)
})
observe({
toggleCssClass(id = "checkbox2", class = ".blue",
condition = input$checkbox)
})
}
)
}
The demo model of shinyjs is found here: http://deanattali.com/shinyjs/overview#demo and it looks as if the toggleClass works there for the button with id "btn" but there is no code example directly to be found, and the indirect example from another section of the shinyjs page doesn't seem to work.
Option 3 I tried to have the style = "background-color: ....read R variable" part access an R variable that contains the color name, i.e. mycolor <- "red", but that doesn't work either, and my knowledge of javascript is too limited to figure out how to make that work.
So, .... if anyone has an idea how to make the color switching work with shinyjs, or with another method that works with my button coded above, I would highly appreciate it, and grant you my eternal gratitude. (been stuck on this for weeks now with this issue)
Mark
p.s. i've looked into bsButtons as well but they are too limited for what I want with the default class options.
That should be doable in "pure" shiny:
Use renderUI() to create the button and insert conditions to check if the button was clicked already.
I decided to store the information (whether a button was clicked) within a reactiveVariable as you wrote that you plan to trigger the color change "if a button is clicked, or a specific element (i.e. inputslider) changes that is linked to a button". So you could also change the global$clicked from other inputs.
library(shiny)
shinyApp(
ui = fluidPage(
uiOutput("button")
),
server = function(input, output) {
global <- reactiveValues(clicked = FALSE)
observe({
if(length(input$RunFullModel)){
if(input$RunFullModel) global$clicked <- TRUE
}
})
output$button <- renderUI({
if(!is.null(input$RunFullModel) & global$clicked){
actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"),
style = "color: white;
background-color: #35e51d;
position: relative;
left: 3%;
height: 35px;
width: 35px;
text-align:center;
text-indent: -2px;
border-radius: 6px;
border-width: 2px")
}else{
actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"))
}
})
}
)
I would like to know how to change the style of "radioButton" and "checkboxInput" widgets with css (tag$style() ).
Any help is appreciated!
Thank you!
library(shiny)
ui <- shinyUI(fluidPage(
h3("Hi! I would like to know how to change the style of these widgets with css (tag$style)"),
h3("I can change the style of sliders, unfortunately I cannot figure out how to do this with 'radioButtons'
and 'checkboxInput'. I usually inspect HTML-element in my browser and look for the css style, in this case this strategy does not work."),
br(),
br(),
radioButtons(inputId = "ex_radio", label = "How to change my style?",
choices = c("I want to be red when checked", "I want to be green")),
br(),
br(),
checkboxInput(inputId = "ex_checkbox", label = "I'd like to look bit different as well",
value = TRUE),
br(),
br(),
h3("Any help is appreciated :) Thank you!")
))
server <- shinyServer(function(input, output) { })
shinyApp(ui, server)
The text you want to change is in a <span>. You can select the first span after the radio input by using the element+element CSS selector:
tags$style("input[type='radio']:checked+span{
color: red;
}
input[type='radio']+span{
color: green;
}")
See here for more details. If you have more than one radio button elements, you can specifically apply this CSS to one of them using the #id selector, for ex:
#ex_radio input[type='radio']:checked+span{
color: red;
}
For the checkboxes, you can do the same thing by replacing type='radio' by type=checkbox.