I wish to make the first element "1" of the selectInput bold in color. Please help.
ui <- fluidPage(
selectInput(
"select",
label = h3("Select box"),
choices = c(1,2,3,4)
))
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Have a look at the shinyWidgets package which has a lot of cool features with its pickerInput
rm(list = ls())
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
pickerInput(inputId = "Id069",
label = "Style individual options with HTML",
choices = c("steelblue 150%",
"right align + red", "bold",
"background color"), choicesOpt = list(style = c("color: steelblue; font-size: 150%;",
"color: firebrick; text-align: right;",
"font-weight: bold;", "background: forestgreen; color: white;")))
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
You can add the style as suggested by #Nitin Shinde in your shiny app like this:
ui <- fluidPage(
tags$head(tags$style(".option:first-child{
font-weight:bold;
//color:#ff0000;
}")),
selectInput(
"select",
label = h3("Select box"),
choices = c(1,2,3,4)
))
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
The output would be something like this:
You can use pseudo elements in CSS
<style>
option:first-child{
font-weight:bold;
color:#ff0000;
}
</style>
You can use the below and nest each selectInput inside the div with class = "test" for every one you wish the first item to be bold in.
ui <- fluidPage(
tags$head(tags$style(".test .option:first-child{
font-weight:bold;
//color:#ff0000;
}")),
div(class = "test",selectInput(
"select",
label = h3("Select box"),
choices = c(1,2,3,4)
)),
selectInput(
"select2",
label = h3("Select box"),
choices = c(1,2,3,4)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
You can set the class of the div to whatever you like just be sure to change the .test part of the CSS accordingly.
Updating "//color:#ff0000;" to "color:#ff0000;" will change the colour to red, just update the hex code to whichever colour you would like to use.
Related
How can i get the arrow that opens the dropdown-menu from the right side to the left in shinyWidgets::pickerInput?
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
pickerInput(
inputId = "name",
label = "Choose option",
choices = c("A", "B", "C"),
options = list(
title = "choose")
)
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
Would a simple CSS tweak do the trick for you?
library(shiny)
library(shinyWidgets)
ui <- fluidPage(
tags$head(
tags$style(HTML("
.filter-option-inner {
padding-left: 10px;
}
span.bs-caret > span.caret {
left: 10px;
}
"
))
),
pickerInput(
inputId = "name",
label = "Choose option",
choices = c("A", "B", "C"),
options = list(
title = "choose")
)
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
I'm trying to align the actionButton right next to the textbox.
Is there a way to add an argument to the column function? Or is there a simple css workaround?
Code:
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(
fluidRow(
column(11, textInput("code", label = " ", width = "100%")),
column(1, actionButton("run", "Run")))
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
Right now it looks like this:
But I want to achieve something like this:
Try margin-top as shown below.
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(
fluidRow(
column(11, textInput("code", label = " ", width = "100%")),
column(1, div( style = "margin-top: 20px;", actionButton("run", "Run"))))
)
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
I wish to change the color of text in a Shiny app based on a user's input. Here's a simple example. Is this basically the correct approach? If I hard code the css it works. For example, if I change:
div(style = css_stub,
to
div(style = "inline-block; red;",
the text color changes. Please explain how to alter css in a Shiny app programmatically.
library(shiny)
css_stub <- paste0("'", "inline-block; color:black;", "'")
ui <- fluidPage(
titlePanel("Color Test"),
sidebarLayout(
sidebarPanel(
selectInput(inputId = "colors",
label = "Choose a color:",
choices = c("red", "blue"))
),
mainPanel(
div(style = css_stub,
textOutput("text_out"))
)
)
)
server <- function(input, output) {
observeEvent(input$colors, {
if (input$colors == "red") {
css_stub <- paste0("'", "inline-block; color:red;", "'")
output$text_out <- renderText({"hello - red"})
} else {
css_stub <- paste0("'", "inline-block; color:blue;", "'")
output$text_out <- renderText({"hello - blue"})
}
})
}
shinyApp(ui = ui, server = server)
I would define classes and styles for each, then and add/remove classes using shinyjs library.
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
tags$head(
tags$style(HTML("
div.red { color: red; }
div.blue { color: blue; }
"))
),
titlePanel("Color Test"),
sidebarLayout(
sidebarPanel(
selectInput(inputId = "colors",
label = "Choose a color:",
choices = c("red", "blue"))
),
mainPanel(
div(id="color_change", style = "inline-block; ",
textOutput("text_out"))
)
)
)
server <- function(input, output) {
observeEvent(input$colors, {
color_to_set <- input$colors
color_to_unset <- setdiff(c("red", "blue"), color_to_set)
shinyjs::addClass("color_change", color_to_set)
for (col in color_to_unset) shinyjs::removeClass("color_change", col)
})
output$text_out = renderText(paste("Hello -", input$colors))
}
shinyApp(ui = ui, server = server)
My example code:
library(shiny)
server <- function(input, output) {
}
ui <- fluidPage(
br(),
selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE),
br(),
selectInput("select2", "Choose: ", c("Alt2.1", "Alt2.2"), selected = c("Alt2.1"), selectize = FALSE, multiple = TRUE)
)
shinyApp(ui = ui, server = server)
How do I have to change the code so that the background color of the widgets is red for select1 and blue for select2?
EDIT:
I tried this:
div(selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE), style = "background-color: red")
But this is not what I am looking for! Instead I want the background of the options to be red!
Edited as requested in the comments below
You can add CSS through style tags as follows:
library(shiny)
server <- function(input, output) {
}
ui <- fluidPage(
br(),
tags$style("#select1 {border: 2px solid #dd4b39;}"),
selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE),
br(),
tags$style("#select2 {background-color:blue;}"),
selectInput("select2", "Choose: ", c("Alt2.1", "Alt2.2"), selected = c("Alt2.1"), selectize = FALSE, multiple = TRUE)
)
shinyApp(ui = ui, server = server)
You can add the following as a last argument to your fluidPage:
tags$style(
HTML('
#select1{
background-color: #ff0000;
}
#select2{
background-color: #0000ff;
}
'
)
)
That way you are adding custom CSS to your app. Passing this to fluidPage should do the job for small changes but if you adjust a lot of elements with CSS you might find it easier to save a .css file in the www directory of your app.
This is a followup question to this question. In the previous question the border of selectInput was changed from the ui side using the following argument tags$head(tags$style(HTML( "#Select1 ~ .selectize-control.single .selectize-input {border: 1px solid #dd4b39;}"))). Now I would like to change the border colour of a particular select output from the server side. My main aim is actually to change the colour based of different conditions. To change the colour from the server side I tried the following code but it does not seem to work. Is there a way to achieve this?
Here is the code I tried:
library(shiny)
ui <- fluidPage(
tags$head(tags$style(htmlOutput("Border_Arg"))),
selectInput("Select1", "Option1", choices = NULL),
selectInput("Select2", "Option2", choices = NULL)
)
server <- function(input, output){
output$Border_Arg <- renderUI({"#Select1 ~ .selectize-control.single .selectize-input {border: 1px solid #dd4b39;}"})
}
shinyApp(ui = ui, server = server)
You were close.
Find a running example below:
library(shiny)
ui <- fluidPage(
selectInput("Select1", "Option1", choices = NULL),
selectInput("Select2", "Option2", choices = NULL),
uiOutput("Border_Arg")
)
server <- function(input, output){
output$Border_Arg <- renderUI({
tags$head(tags$style(HTML( "#Select1 ~ .selectize-control.single .selectize-input {border: 1px solid #dd4b39;}")))
})
}
shinyApp(ui = ui, server = server)