ShinyDashboard - Zoom entire browser with CSS

Question

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)

Winicius Sabino · Answer 1 · 2018-02-22T03:53:51.610

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)

No that doesn't work. It didn't change anything. Also adding a fixed height is a bad practice since this can be viewed on multiple screen sizes. Plus if viewed in IE, there is white space on the right edge as well, not just the bottom. — Kevin, Feb 22 '18 at 12:38

score 0 · Answer 2 · answered Jul 18 '18 at 21:17

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.

This works (somewhat) but I am still getting some dead space on the bottom of the page. When I inspect the elements, I can see changing element.style{min-height: XXpx;} to higher pixels it removes the deadspace. Any thoughts on how to incorporate that? — Kevin, Jul 19 '18 at 12:03
@Kevin you can use css to change the properties of the element. In this case, it's likely the body or some classed div that needs to be changed. I recommend you create a stylesheet in your shiny project directory and link that stylesheet in your shiny ui code. From there, you can target the desired e.g. body { height: 120vh; } . I recommend `vh` as they are relative units. — Robert Tan, Jul 19 '18 at 19:50

ShinyDashboard - Zoom entire browser with CSS

2 Answers2

Linked