add/remove css class to div via shiny

shiny css
r shiny class
shiny html
hr shiny
r shiny hyperlink
r shiny background color
use css with shiny
shiny app css file

I have a select menu in shiny like below.

selectInput(
        "mySelectMenu",
        "",
        c(1,2),
        selected = NULL,
        multiple = FALSE
      )

Actions are observed on this element like below

observeEvent(input$mySelectMenu,{
    currentIndividual<-as.numeric(input$mySelectMenu)
    toggleFunction(currentIndividual)
},ignoreInit=TRUE)

In the inspector, I can see this the div that holds this dropdown content. It's html looks like this

<div class="selectize-dropdown-content">
   <div data-value="1" data-selectable="" class="option selected">318_2007</div>
   <div data-value="2" data-selectable="" class="option">320_2007</div>
   <div data-value="3" data-selectable="" class="option">321_2007</div>
   <div data-value="4" data-selectable="" class="option">344_2009</div>
   <div data-value="5" data-selectable="" class="option">346_2009</div>
   <div data-value="6" data-selectable="" class="option">355_2009</div>
</div>

And it visually looks like this

Finally, I'd like to change the look on some of these menu items in certain instances. A specific scenario... I want the div with 'data-value="2"' to have BOLD RED text. How could I specifically add/remove the CSS class below (.menuItemInactive) from the div with data-value='2'? I am already using shiny.js and would be happy to use it or any other package for this task.

.menuItemInactive{
    font-weight:bold;
    color:red;
}

You can achieve that with the shinyjs package and the runjs method. In the second observeEvent function, you check which value from the selectInput is chosen and then accordingly, you change the css properties of that div.

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  tabItem(tabName = "comp",
          fluidRow(
            selectInput("mySelectMenu", "",c(1,2,3),selected = NULL, multiple = FALSE
            )))
)

server <- function(input, output, session) { 
  observeEvent(input$mySelectMenu,{
    currentIndividual<-as.numeric(input$mySelectMenu)
    # toggleFunction(currentIndividual)
  },ignoreInit=TRUE)

  observeEvent(input$mySelectMenu, {
    if (input$mySelectMenu == 1) {
      runjs(paste0('$(".selectize-input").css({"color": "red", "font-weight": "bold"})'))
    }
    if (input$mySelectMenu == 2) {
      runjs(paste0('$(".selectize-input").css({"color": "blue", "font-weight": "bold"})'))
    }
    if (input$mySelectMenu == 3) {
      runjs(paste0('$(".selectize-input").css({"color": "green", "font-weight": "bold"})'))
    }
  })
}

shinyApp(ui, server)

It just applies the css if an item is selected, if the dropdown box is opened, all items are still black. Do you want it to allways have the desired colors, or is this solution fine for you?

classFuncs: Add/remove CSS class in shinyjs: Easily Improve the , Add or remove a CSS class from an HTML element. addClass adds CSS class. In shinyjs: Easily Improve the User Experience of Your Shiny Apps in Seconds. add() – Adds the given class to the element. This is ignored if the element already contains the specified class. remove() – The provided class is removed from the element, if present. An even simpler way to accomplish the same thing is to use the toggle() method. Which will add the provided class if it is not present, or remove it if it is:

Then I think a combination of @kluu and my previous answer would do the trick. But like this, the order of the items determines the color in the dropdown-modus, not their data-value.

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  inlineCSS(".selectize-dropdown-content > .option:nth-child(1) {
            font-weight:bold;
            color:red;
            }
            .selectize-dropdown-content > .option:nth-child(2) {
            font-weight:bold;
            color:blue;
            }
            .selectize-dropdown-content > .option:nth-child(3) {
            font-weight:bold;
            color:green;
            }

            "
  ),
  tabItem(tabName = "comp",
          fluidRow(
            selectInput("mySelectMenu", "",c(1,2,3),selected = NULL, multiple = FALSE
            )))
)

server <- function(input, output, session) { 
  observeEvent(input$mySelectMenu,{
    currentIndividual<-as.numeric(input$mySelectMenu)
    # toggleFunction(currentIndividual)
  },ignoreInit=TRUE)

  observeEvent(input$mySelectMenu, {
    if (input$mySelectMenu == 1) {
      runjs(paste0('$(".selectize-input").css({"color": "red", "font-weight": "bold"})'))
    }
    if (input$mySelectMenu == 2) {
      runjs(paste0('$(".selectize-input").css({"color": "blue", "font-weight": "bold"})'))
    }
    if (input$mySelectMenu == 3) {
      runjs(paste0('$(".selectize-input").css({"color": "green", "font-weight": "bold"})'))
    }
  })
}

shinyApp(ui, server)

classFuncs: Add/remove CSS class in YTLogos/shinyjs: Easily , Add or remove a CSS class from an HTML element. In YTLogos/shinyjs: Easily Improve the User Experience of Your Shiny Apps in Seconds be replaced by # any of the following examples to produce similar Shiny apps toggleClass(class  You can also add add CSS directly to your Shiny UI. This is the equivalent of adding CSS to the head tag of an HTML document. This CSS will override any CSS imported from an external file (should a conflict arise). As before, you have two options for adding CSS at this level. You can. Add CSS with tags, or; Include a whole file of CSS with includeCSS

If the color does not depend on the value it holds, but rather on the order of appearance in the list, you could use nth-child:

.selectize-dropdown-content > .option:nth-child(2) {
  font-weight:bold;
  color:red;
}

add a class to an input (feature request) · Issue #1860 · rstudio/shiny , It would be nice to have an argument class (or addClass ) for the I frequently want to change the appearance of several textInputs via CSS and for shinyjs::​addClass, adding css to the ids or need to wrap them in divs +  Quick Tip: Add or Remove a CSS Class with Vanilla JavaScript This article was peer reviewed by Mev-Rael and Panayiotis Velisarakos . Thanks to all of SitePoint’s peer reviewers for making

add class="form-control" to selectInput with multiple=TRUE and , $('#vizvars1').addClass('form-control'); @wch I just started a thread on the shiny google group about styling, CSS etc. Please add your CSS tips! I can fix this by adding form-control class to selectize-input element. But it's  It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements. Before jQuery version 1.12/2.2, the .addClass() method manipulated the className property of the selected elements, not the class attribute. Once the property was changed, it was the

[PDF] Package 'shinyjs', The id of the element/Shiny tag class. The CSS class to add/remove selector The shinyjs function call in the above app can be replaced by. PhD in Mathematical Physiology, Renal Physiology, Zurich. shinydashboardPlus . I recently released shinydashboardPlus on CRAN. Therefore, some of the functions below are now included in the package.

Style your apps with CSS, For this UI change, I am using a CSS file named bootstrap.css . To make the default Shiny app (the one on the left), remove theme = "bootstrap.css" . To add CSS to an individual element, pass it to the style argument of the  Shiny’s UI functions are sufficient for creating most Shiny apps. In a large majority of your Shiny apps, you will probably never think of using anything more complicated. However in some apps, you may want to add custom HTML that is not provided by the usual Shiny functions. You can do this by passing HTML tags with the tags object.

Comments
  • Create a media query where @media (data-value: 2) {...}?
  • @RyanMorton - Sounds promising. Can you provide a more detailed answer?
  • @media (data-value: 2) {.option{ font-weight:bold; color:red; }}
  • Honestly, I'm not sure it'll work. Selector is probably a better solution: w3schools.com/cssref/css_selectors.asp
  • This is really close to what I have tried. I noticed the same thing you mention about the dropdown. Even if I change the style/class of the items, once the dropdown opens, those styles and classes are cleared. Any idea how to get around that issue?