R Shiny动态盒子高度

Posted 2021-05-03

这个问题适用于R闪亮的所有盒子类型（盒子，数值盒，tabBox等），但我将举一个使用简单盒子的例子。

在我的代码中，我有很多场合，我在同一行中有两个或更多的盒子。当这些框包含相似数量的信息时，高度对齐没有问题，并且使用较小的浏览器窗口动态调整此高度可以正常工作。

当盒子不包含相同数量的信息时（例如，彼此相邻且具有不同行数的两个表格），问题就出现了;这导致高度不整齐排列。

我知道我可以手动设置盒子的高度，但是当我不知道每个盒子中需要显示的信息量时就会出现问题。我不想让盒子太短（并且可能会删除信息），也不想让盒子太高（并且使用太多的屏幕空间）。但是我确实希望盒子的高度相同。

因此，是否可以提取动态生成的每个盒子的最大高度并使用该高度强制两个盒子达到该高度？

当盒子包含不同数量的信息时，这对我来说很重要，并且当屏幕调整大小并且[例如]一个盒子的文本跳转到两行但另一个盒子没有（导致高度不匹配）时。

类似的问题：

R shiny Datatable: control row height to align rows of different tables

Dynamic resizing of ggvis plots in shiny apps

我已经为下面的Shiny Example 2提供了一个修改过的代码：

library(shiny)
# runExample("02_text")

ui <- fluidPage(

  # App title ----
  titlePanel("Shiny Text"),

  # Sidebar layout with a input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      # Input: Selector for choosing dataset ----
      selectInput(inputId = "dataset",
                  label = "Choose a dataset:",
                  choices = c("rock", "pressure", "cars")),

      # Input: Numeric entry for number of obs to view ----
      numericInput(inputId = "obs",
                   label = "Number of observations to view:",
                   value = 10)
    ),

    # Main panel for displaying outputs ----
    mainPanel(
      box(
        # Output: Verbatim text for data summary ----
        verbatimTextOutput("summary"),
        title = "Verbatim",
        width = 6
      ),
      # Output: html table with requested number of observations ----
      box(
        tableOutput("view"),
        title = "Table",
        width = 6
      )
    )
  )
)

server <- function(input, output) {

  # Return the requested dataset ----
  datasetInput <- reactive({
    switch(input$dataset,
           "rock" = rock,
           "pressure" = pressure,
           "cars" = cars)
  })

  # Generate a summary of the dataset ----
  output$summary <- renderPrint({
    dataset <- datasetInput()
    summary(dataset)
  })

  # Show the first "n" observations ----
  output$view <- renderTable({
    head(datasetInput(), n = input$obs)
  })

}

shinyApp(ui, server)

答案

//使用此功能为您的盒子提供相同的高度

     equalheight = function(container) {
            var currentTallest = 0,
                currentRowStart = 0,
                rowDivs = new Array(),
                $el,
                topPosition = 0;
            $(container).each(function() {

                $el = $(this);
                $($el).height('auto');
                topPostion = $el.position().top;

                if (currentRowStart != topPostion) {
                    for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                        rowDivs[currentDiv].height(currentTallest);
                    }
                    rowDivs.length = 0; // empty the array
                    currentRowStart = topPostion;
                    currentTallest = $el.height();
                    rowDivs.push($el);
                } else {
                    rowDivs.push($el);
                    currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
                }
                for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                    rowDivs[currentDiv].height(currentTallest);
                }
            });
        }

        $(window).load(function() {

            equalheight('use your box same height class here ');

        });

        $(window).resize(function() {
            equalheight('use your box same height class here');
 });