The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]dogado.de.

Using custom styles with CSS

library(sortable)

Using custom styles

Sometimes you want to take control of the styling of your app, e.g. changing colours or sizes.

The functions rank_list() and bucket_list() allows you to set a custom CSS class, and you can then define your own CSS rules that modifies your shiny app.

The default CSS style for a rank list is default-sortable, but you can specify your own class by modifying the class argument.

For example, to add custom-sortable to the CSS class, use:

rank_list(
  class = c("default-sortable", "custom-sortable"), # add custom style
  ...
)

Then you can use any of the standard techniques to Style your apps with CSS to modify your styling.

For example, to modify the custom-sortable class using a shiny tag, use:

tags$style(
  HTML("
    .rank-list-container.custom-sortable {
      background-color: #8A8;
    }
    .custom-sortable .rank-list-item {
      background-color: #BDB;
    }
  ")
)

This app contains a fully worked example that turns the background colours of the rank_list into shades of green:

Source code

## Example shiny app with custom css

library(shiny)
library(sortable)

ui <- fluidPage(
  fluidRow(
    column(
      width = 12,
      tags$b("Exercise"),
      rank_list(
        text = "Drag the items in any desired order",
        labels = list(
          "one",
          "two",
          "three",
          "four",
          "five"
        ),
        input_id = "rank_list_1",
        class = c("default-sortable", "custom-sortable") # add custom style
      ),
      tags$style(
        HTML("
          .rank-list-container.custom-sortable {
            background-color: #8A8;
          }
          .custom-sortable .rank-list-item {
            background-color: #BDB;
          }
        ")
      ),
      tags$b("Result"),
      verbatimTextOutput("results")
    )
  )
)

server <- function(input, output) {
  output$results <- renderPrint({
    input$rank_list_1 # This matches the input_id of the rank list
  })
}

shinyApp(ui, server)

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
Health stats visible at Monitor.