Shiny Dashboard 框和 table 格式不一致

Question

我制作了一个简单的闪亮仪表板，下面带有虚拟 tables。当我运行它和 window 太细时，table 的列运行超出了框的边缘。如果我将 window 设置得足够宽，那么 table 将适合方框。

任何人都可以提供更一致的格式帮助吗？解决方案可能是使框和 table 的宽度固定，使 table 列的宽度随框的宽度而变化，或者其他。

问题底部是每个状态的屏幕截图以供说明。

ui.R

library(shinydashboard)
header <- dashboardHeader(title="Dashboard")
sidebar <- dashboardSidebar(sidebarMenuOutput("menu"))
body <- dashboardBody(
  tabItems(
    tabItem(tabName = "Home",
            fluidRow(
              column(width = 4,
                     box(title = "Column 1", width = NULL, solidHeader = TRUE,
                         tableOutput("Table1")),
                     box(
                       title = "Title 1", width = NULL, solidHeader = TRUE,
                       "Box content")
              ),
              column(width = 4,
                     box(
                       title = "Column 2", width = NULL, solidHeader = TRUE,
                       tableOutput("Table2"))
              ),
              column(width = 4,
                     box(title = "Column 2", width = NULL, solidHeader = TRUE),
                     box(title = "Title 3", width = NULL, solidHeader = TRUE)
              )
            )
    )
  )
)

dashboardPage(header, sidebar, body)

server.R

library(magrittr)
library(xtable)
col1 <- 1:10
col2 <- runif(10)
col3 <- "alphabet soup"
col4 <- c(TRUE, TRUE, FALSE, FALSE, TRUE)

Frame1 <- data.frame(col3, col1, col2, col4, col2, col3)
Frame2 <- data.frame(col3, col3, col3, col4)

server <- function(input, output) {
  output$menu <- renderMenu({
    sidebarMenu(
      menuItem("Home", tabName = "Home", icon = icon("home"))
    )
  })
  output$Table1 <- renderTable({
    xtable(Frame1)
  })
  output$Table2 <- renderTable({
    xtable(Frame2)
  })
}

谢谢！

Answer 1

这是适用于上述情况的解决方案，但如果 table 的宽度变化很大，则无法很好地概括。基本上，您可以编写 HTML 并设置 CSS 属性以确保它们具有最小宽度，而不是使用 Shiny 的函数来制作行。

更简洁的方法可能是找到一种方法来编辑 table 上的 CSS 以使其更适合（可能使用滚动）。

请注意，我只对几列实施了修复。您需要重复使用代码以应用于需要具有最小宽度的任何其他列。

library(shinydashboard)
library(xtable)
header <- dashboardHeader(title="Dashboard")
sidebar <- dashboardSidebar(sidebarMenuOutput("menu"))
body <- dashboardBody(
  tabItems(
    tabItem(tabName = "Home",
      fluidRow(
        HTML("<div class='col-sm-4' style='min-width: 400px !important;'>"),
          box(title = "Column 1", width = NULL, solidHeader = TRUE,
            tableOutput("Table1")),
          box(
            title = "Title 1", width = NULL, solidHeader = TRUE,
            "Box content"),
        HTML("</div>"),
        HTML("<div class='col-sm-4' style='min-width: 350px !important;'>"),
        box(
          title = "Column 2", width = NULL, solidHeader = TRUE,
          tableOutput("Table2")),
        HTML("</div>"),
        column(width = 4,
          box(title = "Column 2", width = NULL, solidHeader = TRUE),
          box(title = "Title 3", width = NULL, solidHeader = TRUE)
        )
      )
    )
  )
)

dashboardPage(header, sidebar, body)

Answer 2

添加此样式解决了我的问题。

在custom.css中：

.content {
  overflow-y: auto;
}

然后将样式包含在闪亮的 css 文件中 ui:

tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")

Shiny Dashboard 框和 table 格式不一致

Shiny Dashboard inconsistent box and table formatting

css

r

shiny

rstudio

xtable