Search code examples
cssrshinydashboard

How can I set decimal width for a column in R Shiny?

I want to set a decimal width for a column() element in my R Shiny dashboard. For example, I need 5 columns, hence I require a width of 2.4 each.

Is there a way to do it?

Solution

  • Shiny's column widths are based on the Bootstrap 12-wide grid system. You can only specify integers. However, you can nest multiple columns to achive a fine grained layout.

    Here is an example regarding nested columns:

    library(shiny)

ui <- fluidPage(fluidRow(
  p(),
  column(4, p(), style = "background-color: red;"),
  column(4, p(), style = "background-color: green;"),
  column(
    4,
    column(4, p(), style = "background-color: red;"),
    column(7, p(), style = "background-color: green;"),
    column(1, p(), style = "background-color: blue;")
  ),
))

server <- function(input, output, session) {}

shinyApp(ui, server)

    enter image description here

    As an alternative you might want to check ?splitLayout which accepts CSS units:

    library(shiny)

ui <- fluidPage(splitLayout(
  p("red", style = "background-color: red;"),
  p("green", style = "background-color: green;"),
  p("blue", style = "background-color: blue;"),
  p("yellow", style = "background-color: yellow;"),
  p("orange", style = "background-color: orange;"),
  cellWidths = "20%"
))

server <- function(input, output, session) {
}

shinyApp(ui, server)

    result