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)
Related
I am trying to apply different color on row selection in Data tables as mentioned in this post: R Shiny DataTable selected row color.
As it seems in the in the example below, this applies to all data tables within the app.
library(shiny)
library(DT)
ui <- fluidPage(
tags$style(HTML('table.dataTable tr.selected td, table.dataTable td.selected {background-color: black !important;}')),
title = 'Select Table Rows',
fluidRow(
column(6, DT::dataTableOutput('Table1')),
column(6, DT::dataTableOutput('Table2'))
)
)
server <- function(input, output, session) {
output$Table1 = DT::renderDataTable(cars, server = FALSE)
mtcars2 = head(mtcars[, 1:8],10)
output$Table2 = DT::renderDataTable(mtcars2, server = TRUE)
}
shinyApp(ui, server)
Is there a way to explicity specify which table will be affected by this?
Just need to add #TableID at the beggining of your style statement. Below I am applying the new highlight style only to Table1 -
library(shiny)
library(DT)
ui <- fluidPage(
tags$style(HTML('#Table1 table.dataTable tr.selected td, table.dataTable td.selected {background-color: black !important;}')),
title = 'Select Table Rows',
fluidRow(
column(6, DT::dataTableOutput('Table1')),
column(6, DT::dataTableOutput('Table2'))
)
)
server <- function(input, output, session) {
output$Table1 = DT::renderDataTable(cars, server = FALSE)
mtcars2 = head(mtcars[, 1:8],10)
output$Table2 = DT::renderDataTable(mtcars2, server = TRUE)
}
shinyApp(ui, server)
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.
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.
When I combine the splitLayout and selectInput in R Shiny, there is something wrong.
The dropdown list of choices cannot be displayed properly.
How can we address this issue.
Please check the reproducible code.
library(shiny)
server <- function(input, session, output) {
output$select_1 = renderUI({
selectInput("select_input","select", choices = LETTERS)
})
}
ui <- fluidPage(
splitLayout(
uiOutput("select_1")
)
)
shinyApp(ui = ui, server = server)
I have 8 selectInputs that I want to place evenly side by side in one row.
Using fluidrow is not OK because the column width can only be integers.
I wonder if there is any alternative way to do this.
Here is a potential fix. It appears that the parent div of the dropdown menu has an overflow: auto style, which blocks the dropdown menu. Changing to visible fixes it.
library(shiny)
server <- function(input, session, output) {
output$select_1 <- renderUI({
selectInput("select_input","select", choices = LETTERS)
})
}
ui <- fluidPage(
splitLayout(
uiOutput("select_1"),
tags$head(tags$style(HTML("
.shiny-split-layout > div {
overflow: visible;
}
")))
)
)
shinyApp(ui = ui, server = server)
I tried the solution of #Xiongbing Jin, but that didn't fully resolve the issue for me, but pushed my to this solution:
# in ui.R
splitLayout(
tags$head(tags$style(HTML(".shiny-split-layout > div {overflow: visible;}"))),
cellWidths = c("0%","50%", "50%"), # note the 0% here at position zero...
selectInput("A", label = "A LBL",),
selectInput("B", label = "B LBL")
)
Is it possible to select multi values using auto complete strings similar to google search and stack overflow tags selection in shiny text box.
dataset<-cbind("John Doe","Ash","Ajay sharma","Ken Chong","Will Smith","Neo"....etc)
I want to select multiple variables from the above dataset as a auto fill in my textbox and pass it to my server.R
ui.R
shinyUI(fluidPage(
titlePanel("test"),
sidebarLayout(
sidebarPanel(
helpText("text"),
textInput("txt","Enter the text",""),
#Pass the dataset here for auto complete
),
mainPanel(
tabsetPanel(type="tab",tabPanel("Summary"),textOutput("text2"))
)
)
))
server.R
# server.R
shinyServer(function(input, output) {
output$text2<- renderText({
paste("hello",input$txt)
})
}
)
EDITED
I have used select2input from shinysky for selecting mulitiple varialbes but now I have added submit button to get selected values together.
#ui.R
select2Input("txt","This is a multiple select2Input",choices=c("a","b","c"),selected=c("")),
actionButton("go","submit")
I want to bind selected option lets say user selected a and c then new variable is
#server.R
input$go #if pressed submit button
var<-cbind("a","c")
output$text<-renderText({ print ("var")})
but this is not working
Look into shinysky package and textInput.typeahead. You can further customize the style of the textinput yourself. Edit: I added example with select2Input from the shinysky package also for reference
rm(list = ls())
library(shinysky)
library(shiny)
my_autocomplete_list <- c("John Doe","Ash","Ajay sharma","Ken Chong","Will Smith","Neo")
ui <- shinyUI(
fluidPage(tags$style(type="text/css",".shiny-output-error { visibility: hidden; }",".shiny-output-error:before { visibility: hidden; }"),
tags$style(type="text/css","#search { top: 50% !important;left: 50% !important;margin-top: -100px !important;margin-left: -250px
!important; color: blue;font-size: 20px;font-style: italic;}"),
mainPanel(
# one way of doing it
textInput.typeahead(id="search",
placeholder="Type your name please",
local=data.frame(name=c(my_autocomplete_list)),
valueKey = "name",
tokens=c(1:length(my_autocomplete_list)),
template = HTML("<p class='repo-language'>{{info}}</p> <p class='repo-name'>{{name}}</p>")
),
br(),br(),
# using select2Input
select2Input("select2Input1","",choices=c(my_autocomplete_list),type = c("input", "select"))
)
)
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)
Edit 2 as per request. Please wrap your objects in a reactive expressions as I did e.g. var <- reactive({...}) so you can re-use those later
rm(list = ls())
library(shinysky)
library(shiny)
my_autocomplete_list <- c("John Doe","Ash","Ajay sharma","Ken Chong","Will Smith","Neo")
ui <- shinyUI(
fluidPage(sidebarPanel(select2Input("txt","",choices=c("a","b","c"),selected=c("")), br(),actionButton("go","submit"), width =2),
mainPanel(textOutput('text'))
)
)
server <- function(input, output, session) {
var <- reactive({
if(input$go==0){return()}
isolate({
input$go
cbind("a","c")
})
})
output$text <- renderText({var()})
}
shinyApp(ui = ui, server = server)
A much easier approach imho is to use shiny::selectizeInput(). It allows you to autocomplete inputs with via the choices argument.
rm(list = ls())
library(shiny)
my_autocomplete_list <- c("John Doe","Ash","Ajay sharma",
"Ken Chong","Will Smith","Neo")
ui <- shinyUI(
selectizeInput(
inputId = 'search',
label = 'Search',
choices = my_autocomplete_list,
selected = NULL,
multiple = TRUE, # allow for multiple inputs
options = list(create = FALSE) # if TRUE, allows newly created inputs
)
)
server <- function(input, output, session) {}
shinyApp(ui = ui, server = server)