Question

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

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

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

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

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

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

类似的问题：

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

Dynamic resizing of ggvis plots in shiny apps

我已为下面的闪亮示例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)

Answer 1

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

     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');
 });

Answer 2

尽管我不知道如何回答“是否可以提取动态生成的每个盒子的最大高度并使用该高度将两个盒子都强制达到那个高度？”确切地说，我发现了以下基于CSS的解决方法，可以解决您的问题，并使所有框都排成相同的高度-只需在行style = "height: XX; overflow-y: auto"的每行中添加boxPlus()：

height: XX，其中XX可以是任何CSS单位（我个人更喜欢视点比例，例如height: 33vh将使一个盒子的大小高达屏幕的三分之一，而不管屏幕分辨率如何），设置盒子的高度；
overflow-y: auto根据需要添加垂直滚动条。

使用这种方法，当用户调整屏幕大小时，所有框都保持相同的高度。

R Shiny动态盒子高度

2 个答案: