发光仪表板中的相同高度的框

Question

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

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

注意：即使两个框都被填充具有完全相同的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函数。

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