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.
Related
I'm using documentation https://shiny.rstudio.com/tutorial/written-tutorial/lesson2/ and more precisely the following code to add a simple paragraph to my shiny page:
ui <- fluidPage(
titlePanel("My Shiny App"),
sidebarLayout(
sidebarPanel(),
mainPanel(
p("p creates a paragraph of text."),
p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
strong("strong() makes bold text."),
em("em() creates italicized (i.e, emphasized) text."),
br(),
code("code displays your text similar to computer code"),
div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
br(),
p("span does the same thing as div, but it works with",
span("groups of words", style = "color:blue"),
"that appear inside a paragraph.")
)
)
)
My goal is to take any of these paragraphs, let's say the last one, and display it like inside a box the same way we can see it here:
http://www.sthda.com/english/articles/40-regression-analysis/168-multiple-linear-regression-in-r/
where it says "library(tidyverse)", this paragraph is inside a box with a different background color.
Does anyone know how I can achieve that?
I don't know much about HTML hence the hard time I'm facing.
Thank you
It's not about HTML it's CSS what you should look for. (;
For example you could copy & paste the CSS styling rules from the webpage you linked into you shiny app (not the recommend way but quick & dirty) to change the appearance of the code tag like so:
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(HTML("
code {
display:block;
padding:9.5px;
margin:0 0 10px;
margin-top:10px;
font-size:13px;
line-height:20px;
word-break:break-all;
word-wrap:break-word;
white-space:pre-wrap;
background-color:#F5F5F5;
border:1px solid rgba(0,0,0,0.15);
border-radius:4px;
font-family:monospace;
}"))),
titlePanel("My Shiny App"),
sidebarLayout(
sidebarPanel(),
mainPanel(
p("p creates a paragraph of text."),
p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
strong("strong() makes bold text."),
em("em() creates italicized (i.e, emphasized) text."),
br(),
code("code displays your text similar to computer code"),
div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
br(),
p("span does the same thing as div, but it works with",
span("groups of words", style = "color:blue"),
"that appear inside a paragraph.")
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Background
I am trying to place a shinyWidget::dropdownButton in the header of a shinydashboard::box. The button should have the look and feel of the button created when using a collapsible box (box(..., collapsible = TRUE).
With the help of some JavaScript I was able to move the dropdown, which seemed to me the easier approach rather than constructing all the HTML myself.
The code below does what I want to do, however I am struggling with the css, because the elements in the dropdown are partly white on white (which makes sense I guess because they are (grand) children of class .box-tools)
What I want
I want that all controls in the dropdown look like as if I put the dropdown in the body of the box:
Goal: Dropdown in the body
Current Situation: Dropdown in the header
Questions
How can I achieve this? Which css rules do I have to use, to make sure that any kind of control looks like as if in the body of the box? Could I achieve the same behaviour even easier? (For instance by wrapping all my controls in the dropdown in another element)? I do know my basics in css but here I feel a bit at loss which rules I need to consider to get to the desired result.
Code
library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinyjs)
makeDropDown <- function(i) {
dropdownButton(
h3("Heading"),
selectInput(paste0("sel", i), "Select:", LETTERS),
downloadButton(paste0("down", i), "Load"),
circle = FALSE,
icon = icon("cog")
)
}
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
useShinyjs(),
box(solidHeader = TRUE,
status = "info",
title = "Box",
div(
makeDropDown(1),
class = "box-tools pull-right",
id = "moveme"
),
makeDropDown(2)
)
)
)
server <- function(input, output, session) {
runjs("$('.box-header').append($('#moveme').detach())")
}
shinyApp(ui, server)
You're right, some CSS rules are overwritten, you can use some inline CSS with !important to control appearance :
makeDropDown <- function(i) {
dropdownButton(
tags$div(
style = "color: black !important;", # for text
h3("Heading"),
selectInput(paste0("sel", i), "Select:", LETTERS),
downloadButton(
outputId = paste0("down", i), label = "Load",
style = "background-color: #f4f4f4 !important; color: #444 !important; border: 1px solid #ddd !important;" # for button
)
),
circle = FALSE,
icon = icon("cog")
)
}
Otherwise, maybe #DivadNojnarg have a better solution in shinydashboardPlus, I'll ask him !
I am building a table using the DT package in a Shiny Dashboard. The table has several columns and I used DT's ColVis functionality to allow users to hide/show only the columns they're interested in.
My question is - is it possible to change the color of those buttons once the Column visibility button is clicked on? As of right now, the colors aren't different enough and its hard to tell which columns are visible and which ones aren't without navigating to the table. I've included a screenshot that shows what I mean. The Site_ID column is not visible in the table, while the Participant_ID column is.
I used inspect element in google chrome to find out the objects name and it looked to be: a.dt-buttons.buttons-columnVisibility, and was under body.skin-blue, div.dt-button-collection.
Using this info I added the following line to my ui.R code:
tags$head(tags$style(HTML(".skin-blue .dt-button-collection .buttons-columnVisibility .active a{background-color: #4d4d4d}")))
But this didn't appear to do anything. Any help on implementing this custom CSS/HTML into my dashboard would be appreciated.
Based on this answer, it looks like the button color needs to be set with background. I also used !important to override the DT button style, although this may not be the best practice.
Here's a small working example:
library(DT)
library(shiny)
ui <- basicPage(
tags$head(
tags$style(
HTML(
".dt-button.buttons-columnVisibility {
background: #FF0000 !important;
color: white !important;
opacity: 0.5;
}
.dt-button.buttons-columnVisibility.active {
background: black !important;
color: white !important;
opacity: 1;
}"
)
)
),
h2("The iris data"),
DT::dataTableOutput("mytable")
)
server <- function(input, output) {
output$mytable = DT::renderDataTable({
datatable(
iris, rownames = FALSE,
extensions = 'Buttons',
options = list(dom = 'Bfrtip', buttons = I('colvis'))
)
})
}
shinyApp(ui, server)
I have a very basic Shiny app.
ui.R:
library(shiny)
shinyUI(fluidPage(
titlePanel("Average Run Length Simulation"),
fluidRow(
tabsetPanel(
tabPanel("Shewhart v. Shewhart",
fluidRow(
column(4,"Rule"),
column(2,"Group 1"),
column(2,"Group 2")
),
fluidRow(
column(4,"1 point more than k sigma away from mean"),
column(2,
checkboxInput("svsg1r1",label=" ",value=F),
numericInput("svsg1k1",label=" ",value=3,min=1,step=1)
),
column(2,
checkboxInput("svsg2r1",label=" ",value=F),
numericInput("svsg2k1",label=" ",value=3,min=1,step=1)
)
)
)
)
)
))
The server.r file is the basic one created by Rstudio in a new project.
What I really want is a tabular layout of widget elements, but, I don't think I'll get that without a lot of work and this isn't worth it. So, instead, I want to reduce the width of the numericInput() boxes akin the the size attribute of an <input> element in an HTML form.
How would I do this in shiny? Is there a standard way to apply css/html specifics to particular elements?
This works, though it's global css and I'd rather have element specific. I added this inside the fluidPage() element in ui.r and it resized both boxes.
tags$head(
tags$style(HTML("
input[type=\"number\"] {
width: 100px;
}
"))
)
For a numericInput box specific resizing, you can use the CSS id selector. In the example above, the following should work to just resize the first box.
tags$head(
tags$style(HTML("
#svsg1k1 {
width: 100px;
}
")))
I want to change the height of the select dropdown in shiny app. The default height displays about 8 options, I would like to see more. It is possible to increase the number of options by decreasing the line height of dropdown, but that is not an optimal solution for me. I searched a lot about how to do it, looked into selectize.js code and my current hypothesis is that either this is trivial, or impossible by design.
What I've learned is that the displayed dropdown from select is a div of class .selectize-dropdown-content, but changing its height and width attributes does not change anything. It is possible to change the background color though. Here is my single file shiny app code:
server <- function(input, output) {
output$distPlot <- renderPlot({
plot(0.5,0.5,xlim=c(0,1),ylim=c(0,1))
text(0.5,0.5,input$Letter)
})
}
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(
selectizeInput("Letter", "", setNames(letters,letters),selected="a",multiple=FALSE),
tags$style(type='text/css',
".selectize-dropdown-content {
height: 600 px;
width: 700 px;
background-color: #b0c4de;
}")
),
mainPanel(plotOutput("distPlot"))
)
))
shinyApp(ui = ui, server = server)
So my question is, whether I am modifying the css of the correct element, or is changing of dropdown height is not possible in selectize.js?
Got the solution, few minutes after posting the question. The height of select dropdown is controlled by max-height attribute. The following css does the trick:
tags$style(type='text/css', ".selectize-dropdown-content {max-height: 400px; }"),