Transcript#

This transcript was generated automatically and may contain errors.

Hi everyone, I am Karan Girthani, I am on the Shiny team and in today's video, we look at how to use responsiveness to have a different layout for different screen sizes.

So if you are using a desktop, you can decide to have a different layout of your Shiny app as compared to something that's on a much smaller screen like a smartphone. So for that, what we will do is, most people when they end up creating their Shiny app for the first time, they won't end up using columns or anything. So they'll just end up creating the UI elements or using the UI elements with the plots. So in this case, you can see this is a basic layout wherein in Shiny, if you do not give it, it will actually stretch to the whole full resolution of the screen.

So it is responsive by default, but it will end up taking the whole screen. So in this case, when if you see how I have a UI card and I have a plot inside it, even if I stretch it to something that's like much more desktop, it will end up taking the most of the screen, depending on if it's fluid or fillable or whatever. But let's say if I wanted to have like multiple cards on each of them for desktop, but like for mobile, make sure it's like the same thing, one card because there's not enough room.

Using UI layout columns

What we will do in this case is we will end up using UI layout columns.

So in this case, what we do is we use the width UI layout columns. This code is in express mode, but same thing can be done in core as well. So you see how we are using the column widths and you can see different screen sizes. We see the large, medium, small, extra small and large typically is with something that's like much more desktop, like much higher resolution, more than 900 pixels with medium is more for like tablets and small is more smartphones and extra small is like much smaller smartphones.

So in this case, when you actually stretch it to a desktop, so yeah, so you can see in a desktop and there's a lot of width, how you can actually see two cards instead of just one and then you can decide if you want the same configuration for the other cards as well, or you can have it take the whole screen.

Bootstrap grid system

So if you look at how I use my code, I say that like we use the 12 units of measurement like across the screen, like a bootstrap thing that Shiny uses. And so I say like the first card should use like six of 12, which is like half and the other one should be six, which is the other half. And then the third one is 12, which means it ends up using the whole thing. So when you look at this one, you see how it's using half, half and then the third one ends up using the whole thing.

But when we go to tablet or smartphone screen sizes, we end up actually using the whole. So that's why when I shrink it, you end up seeing it occupying the whole width of the screen.

But when we go to tablet or smartphone screen sizes, we end up actually using the whole. So that's why when I shrink it, you end up seeing it occupying the whole width of the screen.

If you are interested in learning more about how to use layout columns to make sure your app is responsive for different screen sizes or having the different configuration for your different screen sizes, you can check out our UI.LayoutColumns documentation in the function reference for either core or express mode. And you can see how they have mentioned how we can use different screen sizes for configuring how your app looks for these different screen sizes. So thank you for watching.