在Shiny仪表板中创建相同高度的盒子

Question

创建Shiny仪表板时，我认为如果盒子的高度相等，它们的顶部和底部会对齐。但事实并非如此。这里顶部很好地对齐，而底部则不对齐：

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

注意：即使两个框中都填充了完全相同的ggplot，底部的相同不对齐也会发生。

这些说明表明这很容易实现。

引用：

可以通过设置高度来强制所有框的高度相同。与使用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)

- ixodid

Answer 1

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

请确保两个 box 函数都传递相同的高度参数；同时请注意，如果图形（包括可能的一些额外填充/边距）的总高度大于封闭框的高度，则会溢出底部。因此，为了安全起见，请向 both 的 plotOutput 和 box 函数传递一个 height 参数：

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），但为了说明目的，此方法有效。

- smarchese