R闪亮仪表板:超出引导宽度= 12，并添加水平滚动条 [英] R shiny Dashboard : Exceed the bootstrap width = 12 and add an horizontal scrollbar

问题描述

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

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.

示例:

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数字输入旁边.有谁知道如何解决我的问题?即使我很确定它并不难，我也没有在互联网上找到任何解决方案.

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.

谢谢！

推荐答案

bootstrap布局的整个思想是调整元素的大小并重新排列到新行.因此，我建议在这种特殊情况下使用自定义的 CSS ，而不要依赖引导程序的 fluidRow 和 column .

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. 使用 overflow-x

• 使用 div 作为占位符，其作用与 fluidRow 相同.
• overflow-x:scroll; 设置水平条，仅当有更多元素适合宽度时才可见.

• 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.

在 dashboardBody

• 创建一个名为 same-row 的新CSS类
  如果需要较小的元素，请
  • 控制最大宽度
  • display:table-cell; 强制元素保留在单行中
  • 使用 padding-right 在元素之间获取一些空间
  • 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

    将列更改为使用先前定义的 same-row 类的 div .

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

    可选:不是复制粘贴，而是使用 lapply

    Optional: Instead of copy-pasting create the elements with 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 显示只是其中之一.

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

    这篇关于R闪亮仪表板:超出引导宽度= 12，并添加水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！