闪亮仪表板中的高度相同的框

Question

在创建Shiny仪表盘时，我认为如果盒子的高度相等，它们的顶部和底部将对齐。不是这种情况。此处的顶部对齐良好，而底部则没有对齐：

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

注意：即使两个框用完全相同的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)

Answer 1

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

只需确保两个box函数都传递了相同的height参数；还应注意，如果绘图（可能包括一些额外的填充/边距）的总高度大于封闭框的高度，则它将溢出底部。为了安全起见，请将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，就可以了！），但是出于说明目的，这是可行的。