Changing the CSS class of a div using Shiny

Question

Changing the CSS class of a div using Shiny

One of the features in my Shiny app is a select menu which is represented in the code snippet below.

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

I have set up actions to be triggered on this element as shown below

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

Upon inspecting the element, I can view the div containing the dropdown content. The HTML structure appears 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>

The visual representation can be seen in the image at this link: https://i.sstatic.net/ojo2o.jpg

In certain scenarios, I want to change the appearance of specific menu items. For example, I want the div with 'data-value="2"' to have BOLD RED text. How can I add or remove the CSS class (.menuItemInactive) from this specific div? I am already utilizing shiny.js and am open to using it or any other appropriate package for this customization.

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

css r shiny shinyjs

Answer 1

Answer №1

If you want to change the appearance of a dropdown based on user selection in a Shiny app, you can utilize the shinyjs package along with the runjs method. By monitoring the selectInput choices, you can dynamically adjust the css styles of the dropdown.

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)

Keep in mind that this approach only changes the css when an item is selected. If you prefer to have the colors displayed at all times, a different solution may be needed. Let me know if this solution meets your requirements!

Answer 2

If you want to change the appearance of a dropdown based on user selection in a Shiny app, you can utilize the shinyjs package along with the runjs method. By monitoring the selectInput choices, you can dynamically adjust the css styles of the dropdown.

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)

Keep in mind that this approach only changes the css when an item is selected. If you prefer to have the colors displayed at all times, a different solution may be needed. Let me know if this solution meets your requirements!

Answer 3

Answer №2

If we combine @kluu's and my previous answers, I believe we can achieve the desired outcome. However, it's worth noting that the order of the items determines the color in the dropdown mode, 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)

Answer 4

If we combine @kluu's and my previous answers, I believe we can achieve the desired outcome. However, it's worth noting that the order of the items determines the color in the dropdown mode, 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)

Answer 5

Answer №3

When determining the color based on the order of appearance in the list rather than the value it holds, you have the option to utilize nth-child:

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

Answer 6

When determining the color based on the order of appearance in the list rather than the value it holds, you have the option to utilize nth-child:

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

Changing the CSS class of a div using Shiny

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript Loading Screen - Issues with window.onload functionality

Issues observed with the functionality of the fixed position menu bar

The default appearance of bootstrap-select appears to be flawed

Can you provide instructions on how to insert a hyperlink onto a background image?

Border for status input like on Facebook

What is the best way to change the background color for my photo gallery?

What is the best way to apply a CSS class to my anchor tag using JavaScript?

Is it possible to dynamically change the color of a box shadow using an event handler?

The tooltip for the Google+ button stopped working

retrieve the data-task-IDs from the rows within the table

When displaying content within an iframe, toggle the visibility of div elements

center a horizontal line using StyledSheets in your project

Parallel calculation in R using an MPI cluster setup on WestGrid's High Performance Computing system (pbs file)

Sass Alert: The mixin called roboto-family is missing from the stylesheet. Trace: Problem detected in src/pages/forms/forms.scss at

Tips for aligning a SPAN in a navbar to the center

Deactivating the dark/light skin toggle in bs4Dash

Internet Explorer 11 fails to interpret the attribute attr.xlink:href

Restricting the quantity of categories displayed on facets within a facet chart

Creating a visual that when clicked, reveals an enlarged version at a different location

Mastering the alignment of tab content on Bootstrap 5 to ensure it always displays on the right side