Creating a Sparkling Dashboard: Enhancing Browser Zoom with CSS

Question

Creating a Sparkling Dashboard: Enhancing Browser Zoom with CSS

Trying to incorporate a zoom feature into my ShinyDashboard to enhance the layout aesthetics at 80% zoom level on web browsers.

Came across an SO article for a Shiny app, but unfortunately, it doesn't translate well to Shinydashboard. Applying the CSS code results in excessive white space.

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

Here's a simple example of the code:

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)

css r shinydashboard

Answer 1

Answer №1

Perhaps this could potentially resolve the issue you're experiencing - consider including a height parameter within your application.

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

Perhaps this could potentially resolve the issue you're experiencing - consider including a height parameter within your application.

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 3

Answer №2

library(shinyjs)

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

This code snippet adjusts the size of content in a shinydashboard by zooming out and stretching it to fill the screen. However, I advise against using this method as it can cause issues with interactive map features, leading to problems such as map tiles not rendering properly and map markers moving unexpectedly. These bugs may vary across different browsers, making it a risky approach.

While this solution may work in some cases, it is important to note that tweaking the viewport height value and adjusting other dashboard elements may be necessary to achieve the desired look.

Answer 4

library(shinyjs)

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

This code snippet adjusts the size of content in a shinydashboard by zooming out and stretching it to fill the screen. However, I advise against using this method as it can cause issues with interactive map features, leading to problems such as map tiles not rendering properly and map markers moving unexpectedly. These bugs may vary across different browsers, making it a risky approach.

While this solution may work in some cases, it is important to note that tweaking the viewport height value and adjusting other dashboard elements may be necessary to achieve the desired look.

Creating a Sparkling Dashboard: Enhancing Browser Zoom with CSS

Answer №1

Answer №2

Similar questions

Filtering data without displaying every item as the default setting

Is there a way to display both the label and the input field in a single line?

Trigger an "onMouseMove" event when the "pointer-events-none" css property is applied to fire

Can CSS rules be inserted outside of the Header section?

Center the content of the HTML body

Gradually blend the section of the picture with an image banner after 20 seconds

Adjust the Division's Width to be 20% of the Total Page Width Excluding Margins

Using a purrr loop to dynamically assign the name of a data frame as the title for a gg

Several radial progress charts in JavaScript

Header logo not showing up on webpage

Obtaining a subset of a character string in R

Position the "SHARE" button at the exact center of both the vertical and horizontal axes of an image (activating when the cursor hovers over it)

Expanding rows into columns: condensing data

Discovering the solution to creating a responsive element grid using only CSS: (8-1) - (4-2) - (2-4) - (1-8)

Make the background image within a button stretch to completely cover the button

"Using `float: left` and a right-to-left direction in a cascading style sheet

Hide the class containing specific text content by setting the display to none

Curved edges conceal excess content + alter (Works in Firefox & Safari, but not in Chrome or Opera)

What strategies can be used to adjust node positions in ggraph in order to create diverse network visualizations?

An issue occurred while executing the rscript