时间戳

首页 > 解决方案 > 将元素放置在“闪亮”应用程序中，以便它们调整移动和桌面显示器的大小

css - 将元素放置在“闪亮”应用程序中，以便它们调整移动和桌面显示器的大小

问题描述

我有一个闪亮的应用程序，它有一个标题、一个情节、一些描述和一个actionButton。我希望元素对齐如下：

  1. 顶部的标题；
  2. 底部的描述和操作按钮；
  3. 根据显示器分辨率调整大小之间的绘图。

我的app.R样子如下：

library(shiny)

text <- list(
  "one",
  "one\ntwo",
  "one\ntwo\nthree",
  "one\ntwo\nthree\nfour"
)

ui <- fluidPage(
   titlePanel("title"),
   fluidRow(plotOutput("plot")),
   fluidRow(style = "position:absolute;bottom:20px;left:20px", 
            verbatimTextOutput("text"),
            actionButton("next_el", ">>")
   )
)

server <- function(input, output) {
   output$plot <- renderPlot({
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$next_el + 1)
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   })
   output$text <- renderText(text[[input$next_el + 1]])
   observeEvent(input$next_el, {})
}

# Run the application 
shinyApp(ui = ui, server = server)

我现在拥有的：title、description和actionButton可以在桌面和移动屏幕上放置。description还会根据存在的文本量调整大小。

但是，绘图无法正确调整大小：在移动设备上，描述放置在绘图上。另一方面，在桌面设备上，情节只使用了大约一半的屏幕。

我尝试用plotOutput("plot", height = "50%")and 调整情节的大小plotOutput("plot", height = "auto")，但情节消失了。

如果有足够的空间，我可以做些什么来调整我的情节大小，如果没有足够的空间，我该怎么做？

标签： cssrshiny

解决方案

无需额外的 css/html 代码即可解决此问题的一种方法是使用session$clientData对象动态设置绘图的高度。绘图高度设置为默认值，但您可以根据绘图宽度将高度设置为动态值，该宽度响应于浏览器窗口的大小。

更新后的服务器代码如下所示：

server <- function(input, output, session) {
  output$plot <- renderPlot({
    x    <- faithful[, 2] 
    bins <- seq(min(x), max(x), length.out = input$next_el + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  }, height = function() {
    if (session$clientData$output_plot_width <= 1000) {
      (session$clientData$output_plot_width)*(3/4)
    } else { (session$clientData$output_plot_width)*(7/16) }
  })
  output$text <- renderText(text[[input$next_el + 1]])
  observeEvent(input$next_el, {})
}

其中“情节”output_plot_width与您的情节相匹配id。

您会注意到代码将绘图高度设置为宽度的函数。您可以通过更改函数中的分数来更改纵横比。我还使用了两种不同的纵横比，一种用于绘图宽度小于 1000 像素（手机、平板电脑等）的情况，另一种用于用户更可能在台式机或笔记本电脑屏幕上的情况。

公平地说，我实际上并没有在我的手机上对此进行过测试——我只是在浏览器中使用不同的窗口宽度和纵横比对其进行了测试。

推荐阅读