R shiny Dashboard : Exceed the bootstrap width = 1

问题:

I'm currently learning to use R shiny dashboard. I'm using fluidrow(column(...)) to do my page layout. I'm currently facing a problem: I can't put as much elements as I would like in a row. Basically, I would like to put a lot of elements on the same line with an horizontal scrollbar.

example:

library(shiny)
library(shinydashboard)

header <- dashboardHeader(title = "My Dashboard")
sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "tabs",
    menuItem("My Tab", tabName = "my_Tab", icon = icon("th"))
  )
)

body <- dashboardBody(
  tabItems(
    tabItem(tabName = "my_Tab",
            fluidRow(
              column(width = 2,
                     numericInput("n1", "N", value = 1, min = 0, max = 10, step = 1)
              ),
              column(width = 2,
                     numericInput("n2", "N", value = 1, min = 0, max = 10, step = 1)
              ),
              column(width = 2,
                     numericInput("n3", "N", value = 1, min = 0, max = 10, step = 1)
              ),
              column(width = 2,
                     numericInput("n4", "N", value = 1, min = 0, max = 10, step = 1)
              ),
              column(width = 2,
                     numericInput("n5", "N", value = 1, min = 0, max = 10, step = 1)
              ),
              column(width = 2,
                     numericInput("n6", "N", value = 1, min = 0, max = 10, step = 1)
              ),
              column(width = 2,
                     numericInput("n7", "N", value = 1, min = 0, max = 10, step = 1)
              )
            )
    )
  )
)

ui <- dashboardPage(
  header,
  sidebar,
  body
)

server <- function(input, output, session) {
  session$onSessionEnded(function() {
    stopApp()
  })
}
shinyApp(ui, server)

Here, the last numeric input is not display next to the n6 numeric input. Does anyone knows how to solve my problem ? I did not find any solution on the internet even though I'm pretty sure it is not that hard.

Thank you !

回答1:

The whole idea of the bootstrap layout is that elements resize and reflow to new rows. So I would suggest using custom CSS in this particular case rather than relying on bootstrap's fluidRow and column.

1. Add a horizontal scroll-bar using overflow-x

   • Use div as a placeholder with the same role as fluidRow.
   • overflow-x: scroll; sets a horizontal bar that is visible only when there are more elements that fit the width.

2. Add CSS in dashboardBody

   • Create a new CSS class called same-row
     • Control the max-width if you want smaller elements
     • display: table-cell; forces the elements to stay in a single row
     • Use padding-right to get some space between elements

3. Change column to div that uses the previously defined same-row class.

Optional: Instead of copy-pasting create the elements with lapply

Full code:

body <- dashboardBody(
  tags$head(tags$style(HTML('
      .same-row {
        max-width: 200px;
        display: table-cell;
        padding-right: 10px;
      }
    '))),
  tabItems(
    tabItem(tabName = "my_Tab",
            div(style = "overflow-x:scroll;",
              lapply(1:10, function(i) {
                div(class = "same-row",
                    numericInput(paste0("n", i), "N", value = 1, min = 0, max = 10, step = 1)
                )
              })
            )
    )
  )
)

Please note that there are other methods to place multiple elements in a single row, table-cell display is just one of them.