How to layout two plots in one column followed by a larger plot in a separate column in shiny but keep the heights responsive?

[JasonAizkalns]

So I am reaching out to this community as I have been unsuccessful in asking this question on stackoverflow.

I would like to have one plot be "two plots tall" in height when the screen is wide, but then collapse to the same height when displayed on smaller devices. Is there no way to accomplish this "natively" with fluidRow + column and/or fillRow + fillCol? Do I have to revert to css @media queries?

My original "solution" on stackoverflow resorts to specifying fixed "heights" but this results in a loss of responsiveness.

I can make things a little more dynamic by leveraging client data (see below) but I lose the ability to "shrink the height of the larger plot" once I reduce the screen size (think mobile device).

library(shiny)

# QUESTION: How to responsively shrink height of "plotLeft" when 
# the screen size is small?
ui <- fluidPage(
  fluidRow(
    column(6, plotOutput("plotLeft")),
    column(6, plotOutput("plotTopRight"), plotOutput("plotBottomRight"))
  )
)

server <- function(input, output, session) {
  cdata <- session$clientData
  
  output$plotLeft <- renderPlot(
    plot(cars), 
    height = function() {
      cdata$output_plotTopRight_height + cdata$output_plotBottomRight_height 
    }
  )
  output$plotTopRight <- renderPlot(plot(pressure))
  output$plotBottomRight <- renderPlot(plot(AirPassengers))
}

shinyApp(ui, server)

[pieterjanvc]

Hi,

I'm no expert on this topic, but I think what you're asking is tricky to do without starting to write some fancy JavaScript.

The resizing of the window or adaptation to different screen sizes and subsequent rearrangement of the outputs are all client-side, so there is no easy way for Shiny to know this is happening. It means that you would have to find the JavaScript trigger that decides to rearrange the plots when the window becomes too small, and use that to force the plotLeft to scale itself to half its original size.

So in short, I think there is no 'native Shiny' way t solve this (yet) but some more experienced coders might come up with some JS that'd do the trick. I found a post that might lead you in a promising direction: https://stackoverflow.com/questions/36995142/get-the-size-of-the-window-in-shiny

Good luck!
PJ