根据窗口大小调整盒子的高度和重量 [英] Adjust height and weight of a box according to windows size in shiny

问题描述

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

I am trying this code for automatically adjust height and weight of a box according to windows size i.e., while maximizing the window, the box in my shiny app should also adjust its size.

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

框的宽度会根据应用程序窗口的大小改变其大小，但高度却没有?

The width of the box is changing its size according to the app window size but the height isn't?

推荐答案

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

Note that the documentation for plotOutput says "Note that, for height, using "auto" or "100%" generally will not work as expected, because of how height is computed with HTML/CSS."

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

Here's a solution that uses JavaScript in order to calculate the height of the browser's window, save that number as a Shiny input, and use it as the height of plotOutput. Keep in mind there might be other approaches, and I'd love to see what else can be done, but this is what first came to mind.

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()
  }
))

这篇关于根据窗口大小调整盒子的高度和重量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！