将所有 tabPanel 对齐一行 R Shiny答案

【问题标题】：Aligning all the tabPanels in one line R Shiny将所有 tabPanel 对齐一行 R Shiny
【发布时间】：2019-12-25 00:34:10
【问题描述】：

我正在尝试将tabPanels 与tabBox 对齐在同一行，即使窗口大小已更改。有什么办法吗？

请指教。

Rshiny 代码：

library(shiny)
library(shinydashboard)

body <- dashboardBody(
  fluidRow(

    tabBox(
      height = "250px",
      selected = "Tab3",
      tabPanel("Tabasdasd1", "Tab content 1"),
      tabPanel("Tabadad2", "Tab content 2"),
      tabPanel("Tabasdasd3", "Tab content 3"),
      tabPanel("Tabasdas4", "Tab content 4"),
      tabPanel("Tabasdas5", "Tab content 5"),
      tabPanel("Tabadasd6", "Tab content 6"),
      tabPanel("Tabasdas7", "Tab content 7"),
      tabPanel("Tabasdafsds7", "Tab content 8"),
      tabPanel("Tabasdassa", "Tab content 9")

    )
  )
)

shinyApp(
  ui = dashboardPage(dashboardHeader(title = "tabBoxes"), dashboardSidebar(), body),
  server = function(input, output) {
    # The currently selected tab from the first box

  }
)

【问题讨论】：

最大化tabBox 的width 参数应该会有所帮助（例如，宽度= 12），但如果您迟早调整浏览器窗口的大小，选项卡将分成更多行。
我知道增加宽度会有所帮助。我正在寻找调整大小不应影响对齐的解决方案
那我猜你运气不好......我不认为你可以关闭响应式调整大小。甚至 fixedRow/fluidRow 的 responsive 参数显然在 bootstrap 3 (community.rstudio.com/t/…) 上不再有效。
允许滚动条吗？
@EliBerkow 我想，滚动条应该可以工作。知道如何控制 tabBox 滚动吗？

标签： css r shiny shinydashboard shinyjs

【解决方案1】：

带滚动条：

library(shiny)
library(shinydashboard)

body <- dashboardBody(
    fluidRow(

        tabBox(
            height = "250px",
            selected = "Tabasdasd3",
            tabPanel("Tabasdasd1", "Tab content 1"),
            tabPanel("Tabadad2", "Tab content 2"),
            tabPanel("Tabasdasd3", "Tab content 3"),
            tabPanel("Tabasdas4", "Tab content 4"),
            tabPanel("Tabasdas5", "Tab content 5"),
            tabPanel("Tabadasd6", "Tab content 6"),
            tabPanel("Tabasdas7", "Tab content 7"),
            tabPanel("Tabasdafsds7", "Tab content 8"),
            tabPanel("Tabasdassa", "Tab content 9")

        ),
        tags$head(
            tags$style(
                'ul.nav.nav-tabs {
                    overflow-y: hidden;
                    display: flex;
                }'
            )
        )
    )
)

shinyApp(
    ui = dashboardPage(dashboardHeader(title = "tabBoxes"), dashboardSidebar(), body),
    server = function(input, output) {
        # The currently selected tab from the first box

    }
)

使用 Chrome DevTools 测试可在不同设备上查看，在移动设备上看起来不错：

在普通电脑上：

【讨论】：