ShinyDashboard - Zoom entire browser with CSS

问题

I am trying to implement zoom on my ShinyDashboard as the layout looks better when it is at 80% zoom for the web browser.

I found an article on SO for a Shiny app, however, it doesn't work for Shinydashboard. When I implement the CSS, I get a lot of dead white space.

Article to SO: Zoom out shiny app at default in browser

Simple Code Example:

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)

回答1:

I do not know if this solves your problem, but try adding a height in your app

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)

回答2:

library(shinyjs)

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

This snippet stretches shinydashboard content relatively to fill the screen while zooming it out. However, I don't recommend this because I ran into issues with interactive map mechanics, a different set of problems on different browsers. Specifically, I'm using googleway's google maps and it stops rendering map tiles, zooms from a distance away where you clicked, and map markers move randomly as you drag the map.

This is an isolated instance of bugs, but I'm sure there are other you could run into as well, hence my recommendation against this.

In addition, you may have to fiddle with the right vh value and stretch whatever objects inside your dashboard to make it look right.

来源：https://stackoverflow.com/questions/48918166/shinydashboard-zoom-entire-browser-with-css

标签

css

shinydashboard