根据窗口大小调整盒子的高度和重量

Question

我正在尝试使用此代码根据窗口大小自动调整框的高度和重量，即在最大化窗口的同时，我闪亮的应用程序中的框也应该调整其大小。

tabitems(
 tabItem(tabName = "plot1", 
       box( width = "100%" , height = "100%", solidHeader = FALSE, status = "primary",
         plotOutput("plot"))
)

框的宽度会根据应用窗口大小而改变其大小，但高度不会？

Answer 1

请注意，plotOutput 的文档说“请注意，对于高度，使用“自动”或“100%”通常不会按预期工作，因为高度是使用 HTML/CSS 计算的。”

这是一个解决方案，它使用 JavaScript 来计算浏览器窗口的高度，将该数字保存为 Shiny 输入，并将其用作 height 的 plotOutput。请记住，可能还有其他方法，我很想看看还能做些什么，但这是首先想到的。

library(shiny)
library(shinyjs)

shinyjscode <- "
shinyjs.init = function() {
  $(window).resize(shinyjs.calcHeight);
}
shinyjs.calcHeight = function() { 
  Shiny.onInputChange('plotHeight', $(window).height());
}
"

runApp(shinyApp(
  ui = fluidPage(
    shinyjs::useShinyjs(),
    shinyjs::extendShinyjs(text = shinyjscode),
    plotOutput("plot")
  ),
  server = function(input, output, session) {
    plotHeight <- reactive({ 
      ifelse(is.null(input$plotHeight), 0, input$plotHeight)
    })

    output$plot <- renderPlot({
      plot(1:10)
    },
    height = plotHeight)

    js$calcHeight()
  }
))