One Million Checkboxes with Laravel
This episode is for members only

Sign up to access "One Million Checkboxes with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
13. Making the scroller responsive

Episodes

0%
Your progress
  • Total: 1h 17m
  • Played: 0m
  • Remaining: 1h 17m
Join or sign in to track your progress

Transcript

00:00
So we know at the moment that when we resize this, it's just cutting off the grid that we created earlier. Let's just go over and quickly recap on how we calculated the item size and grid items.
00:12
And then we'll go ahead and pull in a solution to change the grid size when we resize the browser window. So if we head up to where we had our grid items, you can see that we predefined this as 32.
00:25
And the item size was the width of the container divided by the grid items. So we get nicely spaced out check boxes. Now, what we can do is we can actually hook in
00:36
to an event on our scroller, which is on resize. So we can say V on resize, and maybe we could have some sort of on resize function up here, which reacts to this change.
00:49
Let's do this directly under our refs here, just so we can see this properly. So let's create out this on resize event, and let's just console log resize,
01:01
just so we can see this working. Okay, let's pull up our console here and give that a refresh, and let's go ahead and start to resize.
01:08
And you can see that we get that resize event being fired. What we can do with this is we can use something like the use element bounding functionality from Vue Use to see the changes in the size,
01:22
and then go ahead and adjust the grid. So what we're gonna do is install Vue Use, pull this in, and update our grid items so we reduce the size of the grid as we do this.
01:33
Okay, let's go ahead and put in Vue Use. So npm install on Vue Use. I think we need to use Vue Use core, and we'll just wait for that.
01:44
Okay, so now what we can do is import the use bounding box option, or element bounding option from Vue Use. And then down here on the resize,
01:59
we're gonna go ahead and grab the width of the container. We don't know that, we need to use JavaScript to work this out. So we're gonna use use element bounding,
02:09
and now we need to pass in a target. Now at the moment, we don't have any ref associated with our scroller. So let's go ahead and assign a scroller ref to this
02:19
so we can access this element. And let's add this just at the top here. So let's say scroller, make that a ref. And now we have an attachment to that element,
02:29
and we can just pass that directly into there. Okay, let's console log here on the width, just so we can see that. And this should now give us the new width,
02:39
which we're using here of the scroller element. So let's give that a refresh and let's pull this in. And yeah, let's go ahead and use value here to actually get the value out.
02:50
And there we go, great. So this is now giving us the new width of our scroller. What we can now do is take that to recalculate the amount of grids that we want.
03:01
So let's go ahead and set the grid items value. Remember, this is a ref, so we need to use value to the width value divided by the item size value. Let's grab that out.
03:13
And we'll go ahead and round this down. So we'll use math and floor. Okay, so now that we've done this, the amount of grid items will be determined
03:22
by the item size. We know we have an initial item size. This will update it. So as the viewport gets smaller,
03:30
it reduces the grid size. Let's go over and try this out. So I'm gonna go ahead and pull this in. And as you can see, rather than get cut off,
03:38
the grid is just getting gradually smaller until we get all the way down to here and that is working nicely. So now we have a nice reactive grid here
03:51
and nothing is getting cut off. We can go ahead and check items and that works. We have a little bit of a cut off here at the end if we refresh the page, but it's still reacting nicely.
04:03
Okay, there we go. We have a nice reactive grid. And of course, feel free to tweak the values as well if you want to.

Episode summary

In this episode, we tackle the issue of our scroller grid not being responsive—when you resize the browser, part of the grid was getting chopped off. We do a quick recap on how we're calculating our grid items and sizing, which is based on the container width divided by the number of grid items.

To make this dynamic, we set up an event that listens for resize events on our scroller. We then use the awesome @vueuse/core composable, specifically useElementBounding, to grab the current width of the scroller whenever it changes. This lets us update the number of grid items on the fly as the window resizes, instead of sticking to a fixed grid.

We walk through installing VueUse, connecting our scroller with a ref, and using the live width value in our calculation. It all comes together so that when you shrink or expand the window, the grid smoothly decreases or increases with no more ugly cut-offs. At the end, you can check items and watch as the grid stays nicely responsive. If you want to, you can even tweak the grid sizing values for your own style. All done—our grid is looking way more pro now!

Episode discussion

No comments, yet. Be the first!