如何在闪亮的应用程序的分区上添加 x-scroll？

Question

下面的代码应该添加无限数量的列，并且滚动条应该出现在底部。但是滚动条在这里不起作用。请帮忙..

library(shiny)

ui <- fluidPage(
  fluidRow(
   actionButton("addCol","Add New Column"),
   div(style="overflow-x: auto;",
            uiOutput("myUI")
   )
  )
)

server <- function(input, output, session) {
  alld <- reactiveValues()
  alld$ui <- list()

  observeEvent(input$addCol,{

    alld$ui[[length(alld$ui)+1]] <- verbatimTextOutput("aaa", placeholder = T)

    output$myUI <- renderUI({
      fluidRow(lapply(alld$ui,function(x){column(4,x)}))
  })})
}

shinyApp(ui, server)

Answer 1

您正在使用Bootstrap 布局（fluidPage、fluidRow、column），这种布局背后的整个理念就是响应性。

页面被认为是 12 宽度，超过该宽度的元素将换行到新行。这是 Bootstrap 的预期行为。

解决问题的一种方法是使用flexbox。

解决方案：（免责声明：仅适用于 chrome 和 firefox）

我对您的代码做了两处更改：

1. 使用名为 custom-column 的自定义 CSS 类将 column 更改为 div。

column(4,x) 到 div(class = "custom-column", x)})

1. 将flex-nowrap 类添加到fluidRow。

fluidRow(class="flex-nowrap", lapply(alld$ui,function(x){div(class = "custom-column", x)}))

通过这些更改，布局可以在 chrome 和 firefox 上正常运行，但不能在 IE 或 RStudio 中的浏览器上运行。

包含 CSS 类 flex-nowrap 和 custom-column 的完整代码：

library(shiny)

ui <- fluidPage(
  fluidRow(
    tags$head(tags$style("
      .flex-nowrap {
        display: inline-flex;
        -webkit-flex-wrap: nowrap !important;
        -ms-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        flex-direction: row;
      }

      .custom-column {
        width: 200px;
        margin: 0px 10px;
      }      
      "
    )),
    actionButton("addCol","Add New Column"),
    div(style="overflow-x: auto;",
        uiOutput("myUI")
    )
  )
)

server <- function(input, output, session) {
  alld <- reactiveValues()
  alld$ui <- list()

  observeEvent(input$addCol,{

    alld$ui[[length(alld$ui)+1]] <- verbatimTextOutput("aaa", placeholder = T)

    output$myUI <- renderUI({
      fluidRow(class="flex-nowrap", lapply(alld$ui,function(x){div(class = "custom-column", x)}))
    })})
}

shinyApp(ui, server)

输出：