Shiny仪表板中的相同高度框答案

【问题标题】：Same height boxes in Shiny dashboardShiny仪表板中的相同高度框
【发布时间】：2020-03-05 15:08:26
【问题描述】：

在创建闪亮的仪表板时，我认为如果盒子的高度相等，它们的顶部和底部就会对齐。不是这种情况。这里的顶部对齐得很好，而底部则没有：

如何确保顶部和底部对齐？

注意：即使两个框填充完全相同的ggplot，底部也会发生相同的错位。

这些instructions 暗示这很容易。

可以通过设置高度来强制所有盒子的高度相同。与使用 12 宽 Bootstrap 网格设置的宽度相比，高度以像素为单位指定。

示例代码

## app.R ##
library(shiny)
library(shinydashboard)
library(ggplot2)

ui <- dashboardPage(
  dashboardHeader(title = "Box alignmnent test"),
  dashboardSidebar(),
  dashboardBody(
    # Put boxes in a row
    fluidRow(
      box(tableOutput("pop_num"), height = 350),
      box(plotOutput("speed_distbn", height = 350))
    )
  )
)

server <- function(input, output) { 

  # Population numbers
  output$pop_num <- renderTable({
    df <- tibble(
      x = c(1,2,3,4),
      y = c(5, 6, 7, 8)
    )
  })


  # Population distribution graph
  output$speed_distbn <- renderPlot({
    ggplot(data = cars, aes(x = speed, y = dist)) +
      geom_point()
  })
}

shinyApp(ui, server)

【问题讨论】：

标签： r shiny shinydashboard

【解决方案1】：

请注意，当您设置高度时，第一个350 应用于box 函数，而第二个350 作为参数传递给plotOutput 函数。

只需确保两个box 函数都传递了相同的高度参数；另请注意，如果绘图（可能包括一些额外的填充/边距）的总高度大于封闭框的高度，它将溢出底部。所以为了安全起见，将height 参数传递给两个 plotOutput 和box 函数：

box_height = "20em"
plot_height = "16em"

ui <- dashboardPage(
  dashboardHeader(title = "Box alignmnent test"),
  dashboardSidebar(),
  dashboardBody(
    # Put boxes in a row
    fluidRow(
      box(tableOutput("pop_num"), height = box_height),
      box(plotOutput("speed_distbn",height = plot_height), height = box_height)
    )
  )
)

请注意，情节的高度较小。可能有更聪明的方法可以自动执行此操作（当然，如果您执行一些自定义 CSS！），但出于说明目的，这是可行的。

【讨论】：