Formatting RHandsontable with ShinyThemes

Question

I am trying to format a dropdown list in RHandsontable to no avail.

Here is some reproduceable code:

library(shiny)
library(dplyr)

DF <- data.frame(Value = 1:10)
choices <- 1:20


ui <- shinyUI(fluidPage(theme = shinytheme("darkly"),

        rHandsontableOutput("hot")
        ,h4("This is example text from the theme.")


  ))

server = (function(input, output) {

    values <- reactiveValues()

    ## Handsontable
    observe({
      if (!is.null(input$hot)) {
        values[["previous"]] <- isolate(values[["DF"]])
        DF = hot_to_r(input$hot)
      } else {
        if (is.null(values[["DF"]]))
          DF <- DF
        else
          DF <- values[["DF"]]
      }
      values[["DF"]] <- DF
    })

    output$hot <- renderRHandsontable({
      DF <- values[["DF"]]
      if (!is.null(DF)) {
        rhandsontable(DF) %>%
          hot_col(col = c("Value"), type = "dropdown", source = choices, strict = TRUE, allowInvalid = FALSE) %>%
          hot_cols(renderer = "
                   function(instance, td, row, col, prop, value, cellProperties) {
                   Handsontable.renderers.DropdownRenderer.apply(this, arguments);
                   td.style.color = 'gray';
                   }
                   ")
      }
    })


    })


shinyApp(ui = ui, server = server)

The issue I am having is that the ShinyThemes package overwrites the default font color, making the font color white on top of a white background for the dropdown menu. I found some code that changes the font color of the values in the table to gray (see code). However, this font color doesn't apply to the dropdown menu.

How can I change the font color and/or the background of the dropdown menu?

Answer 1

Use this CSS:

css <- "
.handsontable.listbox td {
  background: black;
}
.handsontable.listbox td.htDimmed {
  color: red;
}
.handsontable.listbox tr:hover td {
  background: yellow; 
}
.handsontable.listbox tr td.current {
  background: green; 
}"
ui <- shinyUI(fluidPage(theme = shinytheme("darkly"),
                        tags$head(tags$style(HTML(css))),
                        ......