R闪亮动态框高度答案

【问题标题】：R Shiny dynamic box heightR闪亮动态框高度
【发布时间】：2018-08-14 05:08:17
【问题描述】：

这个问题与 R Shiny 中的所有框类型（框、值框、选项卡框等）有关，但我将举一个使用简单框的示例。

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

当这些框不包含相同数量的信息时（例如，两个相邻且行数不同的表格），就会出现问题；这会导致高度排列不整齐。

我知道我可以手动设置框的高度，但是当我不知道每个框需要显示的信息量时问题就来了。我不想让盒子太短（并可能剪掉信息），也不想让盒子太高（并使用太多的屏幕空间）。但是我确实希望这些盒子的高度相同。

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

当框包含不同数量的信息时，这对我来说很重要)。

类似问题：

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

Dynamic resizing of ggvis plots in shiny apps

我为下面的 Shiny Example Number 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)

【问题讨论】：

这也是我正在寻求答案的问题。你设法找到答案了吗？我不知道如何使用下面提供的功能。
@DmitryIshutin 我相信 css 下面的代码，您可以读取 css 文件以允许格式化闪亮的仪表板。我不得不承认我对此的要求落空了，所以我从未真正使用过它。

标签： r shiny

【解决方案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');
 });

【讨论】：

请原谅我对编码世界的不完全理解，但是如何实现这个功能呢？我不认为它是 R 代码，所以我不完全清楚如何将此功能应用于我的盒子

【解决方案2】：

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

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

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

【讨论】：