33

I Would like to determine the size of the browser window in Shiny to help me layout my plot divs better. Specifically I would like to determine the aspect ratio of the window to see how many divs I should spread across the screen and it still look nice. My initial thought would be that the number of plots would be floor(width/(height-navbar_height)).

I did some looking for this and I am currently unable to locate a possible solution and am currently lead to believe that this feature is simply not present in the clientData structure. Any thoughts?

3 Answers 3

Reset to default

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

38

See the example below. It uses Javascript to detect the browser window size (initial size and any resize), and use Shiny.onInputChange to send the data to the server code for processing. It uses shiny:connected event to get the initial window size, as Shiny.onInputChange is not ready for use until shiny is connected.

library(shiny)

# Define UI for application that draws a histogram
ui <- shinyUI(fluidPage(

   # Application title
   titlePanel("Old Faithful Geyser Data"),

   # Sidebar with a slider input for number of bins 
   sidebarLayout(
      sidebarPanel(
         tags$head(tags$script('
                                var dimension = [0, 0];
                                $(document).on("shiny:connected", function(e) {
                                    dimension[0] = window.innerWidth;
                                    dimension[1] = window.innerHeight;
                                    Shiny.onInputChange("dimension", dimension);
                                });
                                $(window).resize(function(e) {
                                    dimension[0] = window.innerWidth;
                                    dimension[1] = window.innerHeight;
                                    Shiny.onInputChange("dimension", dimension);
                                });
                            ')),
         sliderInput("bins",
                     "Number of bins:",
                     min = 1,
                     max = 50,
                     value = 30)
      ),

      # Show a plot of the generated distribution
      mainPanel(
         verbatimTextOutput("dimension_display"),
         plotOutput("distPlot")
      )
   )
))

# Define server logic required to draw a histogram
server <- shinyServer(function(input, output) {
   output$dimension_display <- renderText({
       paste(input$dimension[1], input$dimension[2], input$dimension[2]/input$dimension[1])
   })

   output$distPlot <- renderPlot({
      # generate bins based on input$bins from ui.R
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$bins + 1)

      # draw the histogram with the specified number of bins
      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   })
})

# Run the application 
shinyApp(ui = ui, server = server)
3
  • Thanks for this. Sorry it took so long to check. It seems though that there would be a better place to add this outside of the sidebarPanel. For instance, right after the fluidPage call. May 8, 2016 at 4:52
  • It does not matter where you add the Javascript though, as the Javascript will appear in the head section of the HTML regardless (as we used tags$head). You can verify the source code of the html page. May 8, 2016 at 20:30
  • This javascript snippet gives me the following error: "Warning: Error in if: argument is of length zero"
    – rcorty
    Oct 14, 2020 at 14:38
2

There is a new and much simpler way to do this since 2021: using the {shinybrowser} package. Example:

library(shiny)

ui <- fluidPage(
  shinybrowser::detect(),
  "Window size:",
  textOutput("size")
)

server <- function(input, output, session) {
  output$size <- renderText({
    paste(
      shinybrowser::get_width(),
      "x",
      shinybrowser::get_height()
    )
  })
}

shinyApp(ui, server)

Note that {shinybrowser} is currently on GitHub only and not yet on CRAN (should be in the near future). Note also that {shinybrowser} only gives you the initial dimensions, but will not update if the browser is resized.

2
  • Yes that's correct. The question did not mention if this needs to be re-calculated on browser resize or if just once. I'll add a comment to my answer to mention this drawback.
    – DeanAttali
    May 27, 2021 at 7:56
  • 1
    It's not yet, I want to get more people testing it before. But I did open a github issue based on this discussion to look into making the dimensions truly reactive
    – DeanAttali
    May 27, 2021 at 19:24
-2

Shorter version for getting window dimensions in shiny with JS from package htmlwidgets:

window_height <- JS('window.innerHeight')
window_width <- JS('window.innerWidth')
2
  • 5
    Please provide a MWE in Shiny.
    – awwsmm
    Jul 23, 2018 at 8:55
  • This doesnt work for me besides, there is no working example
    – Bogaso
    Sep 3, 2019 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.