Search code examples
shinyshinydashboard

Changing the text color for matrixInput in sidebar of shinydashboard

I am working with Shinydashboard and I would like to use a matrixInput widget in the sidebar. When I try input a value, the background in the input cell highlights in white and the input text is also white. As a result I am not able to view the text.

I would like to use CSS to change the font colour to black, but I am not getting it right. I included a simple example below of my problem.

Kind regards Daniel

library(shiny)
library(shinydashboard)
library(shinyMatrix)

mat <- matrix(rep("text", 9), 3, 3)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(

      tags$style(".skin-blue .sidebar .matrix-input-cell {color: #444; }"), #my attempted css to change the color of the text

      matrixInput(
      "mInput",
      value = mat,
      class = "character"
    )
  ),
  dashboardBody()
)

server <- function(input, output) {
}

shinyApp(ui = ui, server = server)
Solution

  • You need to modify the CSS when the matrix cell is active. By the way, I found this using the browser inspector mode of CSS and HTML, and activating the ":active" option in CSS (you also have ":hover", ":focus" ...)

    tags$style(".vue-input td.active, .vue-input th.active {color: #444;}")

    Edit : note that if you have another table in your app, it may affect it because I modified the CSS class and not a div. You will need to parent the CSS modifications with your input id if you want to make sure only this matrix input have black text when a cell is active