Shiny - No side by side layout on mobile

Question

I'm using a side-by-side layout to display multiple plots on the same row. However it looks bad on mobile. How can I keep the side by side layout on desktop, but 1 plot per row on mobile?

fluidRow(
  splitLayout(cellWidths = c('49%', '49%'),
    plotlyOutput('pWaterLvl'),
    plotlyOutput('pHumidity')
  )
),
fluidRow(
  splitLayout(cellWidths = c('49%', '49%'),
    plotlyOutput('pWaterTemp'),
    plotlyOutput('pAirTemp')
  )
)

You could get the user´s screen resolution via JS: http://stackoverflow.com/questions/33250075/get-screen-resolution-from-javascript-in-r-shiny and adapt the ui accordingly. — Tonio Liebrand, Feb 09 '17 at 16:24

score 2 · Accepted Answer · answered Feb 09 '17 at 22:20

2

I think you can let bootstrap grid system handle it.

fluidRow(
  column(6, plotlyOutput('pWaterLvl')),
  column(6, plotlyOutput('pHumidity')) 
)

answered Feb 09 '17 at 22:20

Hao

7,476
1
38
59

Andy Barker · Answer 2 · 2018-01-08T03:12:25.593

If you need to control the grid sizes on multiple devices, you can use a combination of the width and class settings (width controls 'col-sm' by default).

This example puts the plots on top of each other on small screens, next to each other on medium screens, and makes the second plot slightly wider on large screens.

fluidRow(
  column(12, class = "col-md-6 col-lg-5", plotlyOutput('pWaterLvl')),
  column(12, class = "col-md-6 col-lg-7", plotlyOutput('pHumidity')) 
)

Shiny - No side by side layout on mobile

2 Answers2