Question

我正在尝试在zoom上实施ShinyDashboard，因为当网页浏览器的缩放率达到80％时，布局看起来会更好。

我在Shiny应用中发现了一篇关于SO的文章，但是，它不适用于Shinydashboard。当我实现CSS时，我得到了很多死白空间。

文章到SO：Zoom out shiny app at default in browser

简单代码示例：

library(shiny)
library(shinydashboard)

header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
  tags$style("
              body {
             -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
             zoom: 0.8; /* Other non-webkit browsers */
             zoom: 80%; /* Webkit browsers */
             }
             "),
  "test")

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {}

shinyApp(ui, server)

Answer 1

我不知道这是否解决了您的问题，但尝试在您的应用中添加height

library(shiny)
library(shinydashboard)

header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
  fluidPage(
   tags$head(tags$style(HTML('
                         .content-wrapper,
                        .right-side {
                          background-color: #ffffff;
                          height: 1200px;
                         }

                body{ 
                -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
                zoom: 0.7; /* Other non-webkit browsers */
                 zoom: 70%; /* Webkit browsers */
                }
                          '))),
  "test")
  )

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {}

shinyApp(ui, server)

Answer 2

library(shinyjs)

runjs(
  "document.body.style.zoom = 0.8;
  var elem = document.getElementsByClassName('wrapper');
  elem[0].style.height = '125vh';"
)

此代码段将shinydashboard内容相对拉伸，以在缩小屏幕时充满屏幕。但是，我不建议这样做，因为我遇到了交互式地图机制的问题，这是在不同浏览器上出现的一系列不同问题。具体来说，我使用的是googleway的Google地图，它会停止渲染地图图块，从单击位置的远处进行缩放，并且在拖动地图时会随机移动地图标记。

这是一个孤立的错误实例，但是我敢肯定您还会遇到其他错误，因此，我对此提出了建议。

此外，您可能不得不摆弄正确的vh值，并拉伸仪表板中的所有对象以使其看起来正确。

ShinyDashboard - 使用CSS缩放整个浏览器

2 个答案: