R shiny Dashboard : 超出 bootstrap width = 12 并添加水平滚动条

Question

我目前正在学习使用 R shiny 仪表板。我正在使用 fluidrow(column(...)) 进行页面布局。我目前面临一个问题：我无法连续放置尽可能多的元素。基本上，我想把很多元素放在水平滚动条的同一行上。

示例：

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)

这里，最后输入的数字没有显示在n6 数字输入的旁边。有谁知道如何解决我的问题？我没有在互联网上找到任何解决方案，尽管我很确定它并不难。

谢谢！

Answer 1

bootstrap 布局的整体思想是元素调整大小并重排到新行。所以我建议在这种特殊情况下使用自定义 CSS 而不是依赖 bootstrap 的 fluidRow 和 column.

使用 overflow-x
添加水平 scroll-bar
- 使用div作为占位符，作用与fluidRow相同。
- overflow-x: scroll;设置一个水平条，只有当有更多适合宽度的元素时才可见。
在dashboardBody
中添加CSS
- 创建一个名为 same-row 的新 CSS class
  - 如果你想要更小的元素，请控制 max-width
  - display: table-cell; 强制元素保持在一行中
  - 使用padding-right在元素之间得到一些space
将column更改为使用先前定义的same-rowclass.

div

可选：用lapply

代替copy-pasting创建元素

完整代码：

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)
                )
              })
            )
    )
  )
)

请注意，还有其他方法可以将多个元素放在一行中，table-cell显示只是其中之一。

R shiny Dashboard : 超出 bootstrap width = 12 并添加水平滚动条

R shiny Dashboard : Exceed the bootstrap width = 12 and add an horizontal scrollbar

r

shiny

shinydashboard

bootstrap-4

完整代码：