Styling

[razz-matazz]

Hello,

First, thanks for the package.

Can you tell me what's the easiest way of changing the style of the ui elements? For example, I want to change the blue background of the selected row. Or smaller margins/paddings?

[pvictor]

Hello,

You can change colors (background and text) with CSS, and adjust paddings with sass variables through using a {bslib} theme as the treeview is contructed with Bootstrap components (https://getbootstrap.com/docs/5.3/components/list-group/#variables). Here's an example :

library(shiny)
library(shinytreeview)

ui <- fluidPage(
  theme = bslib::bs_theme(
    version = 5L, 
    "list-group-item-padding-y" = "1px", 
    "list-group-item-padding-x" = "1px"
  ),

  tags$style(
    ".node-tree.node-selected {color: black; background-color: yellow;}",
    ".node-tree.node-selected:hover {color: black; background-color: gold;}" # when mouse is hover
  ),

  tags$h3("treeviewInput"),
  treeviewInput(
    inputId = "tree",
    label = "Choose an area:",
    choices = make_tree(cities, c("continent", "country", "city")),
    multiple = FALSE,
    prevent_unselect = TRUE
  ),
  verbatimTextOutput(outputId = "result")
)

server <- function(input, output, session) {
  output$result <- renderPrint({
    input$tree
  })
}

shinyApp(ui, server)

Victor

[razz-matazz]

Thanks.

Can you give me any clues how to find out which classes exists?

.node-tree.node-selected .node-tree.node-selected:hover ...

Is there a list somewhere?

[pvictor]

No there's no list, you have to search within your html page source code, you can use your browser console for this (right click + inspect). If you're interested on customizing shiny elements and interface, I suggest you to look at this good resource : https://unleash-shiny.rinterface.com/