2

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

I found an article on SO, 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)

Picture showing problem (using chrome): enter image description here

Kevin
  • 1,974
  • 1
  • 19
  • 51

1 Answers1

1

I think it will work if you modify your ui code some. It works for me when I do it this way:

library(shiny)
library(shinydashboard)

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

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

shinyApp(ui, server)
Alex Dometrius
  • 812
  • 7
  • 20
  • Hi @Alex, it is still showing the same look. A section is a white dead space :/ . I have tried it both on IE and Chrome. IE causes a white space on both right side and bottom whereas Chrome cause white space only on the bottom (refer to picture above) – Kevin Dec 13 '17 at 03:27
  • That's strange. It works perfectly on my machine. Can you update the post with more of your code? Maybe there is something overriding the css? – Alex Dometrius Dec 13 '17 at 03:36
  • That simplified version of the code is giving me the same issues. It is strange, I agree. I was thinking of a workaround of figuring out the viewpoint height and width dynamically and somehow using that to change the width and height but I can't figure it out. – Kevin Dec 13 '17 at 05:38
  • Also @Alex, your code is missing commas between `dashboardHeader()` and `dashboardSidebar()` which will cause an error in your code. It only works because it is using memory cache for your latest working code, not actually zooming properly. – Kevin Dec 17 '17 at 20:49
  • Thanks for the heads up, I didn't actually use the code above to test my answer. I instead plugged the CSS into a couple of my "stable" ShinyDashboards in production to see if it worked. But I am confused now... it worked on two of my dashboards before I answered this question (not because of any memory cache though - I made sure to check this beforehand). But now I re-tested it after your latest comment and I am somehow having the same issue you are having. I am considering removing my answer because this behavior is strange. Also, I am using Firefox. – Alex Dometrius Dec 19 '17 at 18:00