Question

我制作了一个简单闪亮的仪表板，下面有假表。当我运行它并且窗口太薄时，表格的列会在框的边缘上运行。如果我让窗户足够宽，那么桌子就会放在盒子里。

任何人都可以使用更一致的格式吗？解决方案可能是使盒子和桌子的宽度固定，使表格的宽度随盒子宽度的不同而变化，或其它方式。

问题的最后是每个州的屏幕截图，以供说明。

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)
  })
}

enter image description here

谢谢！

Answer 1

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

更简洁的方法可能是找到一种方法来编辑桌面上的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;
}

然后在闪亮的ui中包含带有css文件的样式：

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

闪亮的仪表板不一致的框和表格式

2 个答案: