add/remove css class to div via shiny

34
May 16, 2018, at 4:20 PM

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;
}
Answer 1

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;
}
Answer 2

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?

READ ALSO
Angular Bootstrap css : Force Last Column In a Row To Fill Remaining Empty Space

Angular Bootstrap css : Force Last Column In a Row To Fill Remaining Empty Space

In my Angular5 app, I have a container component that I'm using to declare a row containing some components organized in n columns like the following:

41
How to remove the name of a parent div a class with C # Razor?

How to remove the name of a parent div a class with C # Razor?

In jQuery you can get the parent element of a div element and remove the class, something similar to this:

68
Asp.net Core - where are these CSS/LESS files coming from?

Asp.net Core - where are these CSS/LESS files coming from?

I created a default Aspnet Core web app and ran it

51
Ngx-bootstrap popover positioning auto not working as expected on right side of screen?

Ngx-bootstrap popover positioning auto not working as expected on right side of screen?

I'm trying to implement some popovers on our application (Using Angular 60

71