Question

我目前正在学习使用R闪亮仪表板。我正在使用fluidrow（列（...））来进行页面布局。我目前正面临一个问题：我不能连续添加多少元素。基本上，我想在水平滚动条的同一行上放置很多元素。

示例：

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

引导布局的整个想法是元素调整大小并重新转换为新行。因此，我建议在此特定情况下使用自定义CSS，而不是依赖于引导程序fluidRow和column。

使用overflow-x
添加水平滚动条
- 使用div作为占位符，其角色与fluidRow相同。
- overflow-x: scroll;设置一个水平条，仅当有更多符合宽度的元素时才可见。
在CSS
中添加dashboardBody
- 创建一个名为same-row的新CSS类
  - 如果您想要更小的元素，请控制max-width
  - display: table-cell;强制元素保持单行
  - 使用padding-right在元素之间获得一些空间
将使用之前定义的column课程的div更改为same-row。

可选：而不是使用lapply

完整代码：

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闪亮仪表板：超过自举宽度= 12并添加水平滚动条

1 个答案:

完整代码：