Build a Trello Clone With Livewire
Playing
04. Styling a scrollable board

Episodes

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

Transcript

00:00
The design of our board is incredibly important
00:02
because we need this to be horizontally scrollable. If we have too many columns going across the page, we want to be able to scroll across. But we also don't want to have to scroll down.
00:12
We want the cards to end or the columns to end at the very bottom. And we want the cards inside each column to be scrollable. So in this episode, we're going to get to work
00:22
on the horizontal scrolling and just making sure everything lines up. We'll put some dummy data in there. And then we'll style the columns
00:31
and the cards in separate episodes. Okay, let's get started on doing this now by heading over to board show. And just down below our header,
00:40
let's create out a wrapper for all of our content. Okay, so let's create out a width of full for this entire thing. And we're going to set a padding of six.
00:50
So inside of here, we're going to have each of our columns. So let's just start to build these columns out. We'll do a really simple for each loop here on a PHP range,
01:01
just so we can see some of this data roll in. So let's imagine that this is a column. Let's go ahead and end that for each down here. And let's pull this in and give this a background color.
01:11
So let's set the background color to blue 500. And let's just say column, just to demonstrate this. So at the moment, not looking great. We want these to be stacked vertically across the board.
01:24
So to do this, we're going to create another wrapper around each of our columns. We could do this in the top one, but I'll show you why we're not going to do that
01:31
in a second. And for this div here, we're going to set this to flex. So these sit next to each other and let's go ahead and set a width here of max.
01:41
And we'll take a look at why in just a second. Okay, so each of our columns is now vertical, which is great. Let's go ahead and give these a predefined width
01:49
just so we can look at that scrolling. To do this, we're going to just say width and we'll just give them any kind of width. Let's say 360 pixels.
01:57
And there we go. They're a little bit too big. Let's bump this down to 260. Okay, so you can see each of our columns here.
02:04
Let's add a little bit of spacing between each column. So to do this, we can use a space X and let's match this up to the same padding. So we'll use six and there we go.
02:15
So we've now got all of these columns in here, but as you can see, when I scroll, this isn't working as we expect. We want this section here only
02:24
to be scrollable horizontally. To do this at the outer container here, we're going to set overflow X to scroll. Let's take a look at the difference here.
02:34
And you can see at the moment we can scroll, which is great, but we're limited to this sort of tiny section here. And really what we want to happen here is this to be full height always.
02:45
So what I like to do is just go ahead and set a background color on the containers I'm working with so I can see where the container is actually sitting.
02:53
So let's set this to a background of green 500. It's not going to look great at the moment, but at least we can see what we're dealing with. Okay, so for this outer container,
03:02
let's go and just set this to a full height and see what happens. So let's say height full. Okay, that's not made much difference.
03:10
Let's try height max and let's go over. That's not made much difference either. What we want is height screen. That's going to take the viewport of the browser
03:22
and it's going to give it that height. Now we're not going to be able to do this on its own. As you can see, the screen height goes from here down to the bottom.
03:32
That means that the height of this inner container is a little bit too big. What we need to do is take into account the overall header of the page,
03:39
which might change in future. So you might need to tweak these values. We're going to need to take the height of the title just here.
03:46
And we're also going to need to take into account the padding at the top and the padding at the bottom as well. Luckily for us, Tailwind allows us
03:54
to do this really easily. What we're going to do with this is instead of using height screen directly, we're going to use height
04:01
and then we're going to use the CSS calc function to basically take away the height of the header here and the padding from the height of the screen. So how do we use screen height inside of calc?
04:15
Well, we can go ahead and use the built-in theme function with Tailwind to say height and screen. That's going to have exactly the same effect
04:23
as just applying height screen on its own. You can see that we are back to where we were before. What we can do now though, is we can calculate this, but we can either add or subtract any values from this.
04:37
Now, once again, the height of the header and the height of the title can change. So you might need to tweak these. And we also need to think about
04:44
the responsiveness of this design as well. Now, luckily for us, if we just open up this in a responsive mode in Chrome, you can see that the height of the header
04:56
and the title never change. So that's pretty good. What it means is we can just grab the height of these and we can just manually subtract them.
05:04
So let's go ahead and just pull this back down. Let's take the height of the header here, which we can see is 64 pixels, and we can take the height of the title here as well,
05:15
which if we take a look is 73 pixels. So to minus this or take this away from the height of the screen, we just wanna do minus 64 pixels
05:26
and we wanna do minus 73 pixels. Might feel a bit weird including these like this, but I'm gonna show you another way that we can pluck these out
05:35
if you have fixed heights for your headers as well. Okay, let's take a look at the difference here. And you can see that sure enough, we've got just a little bit of extra scroll now.
05:44
So that's taken into account the screen height minus these two headers. The reason there's a little bit of extra scroll here is because we've got some padding here and here.
05:55
Now let's think about this. We set the padding here to six, which means of course double that because we've got this at the top and bottom
06:03
is gonna be 12. So what we're again gonna do is say theme padding and we're gonna take away 12 lots of padding as in two lots of six.
06:13
Let's go over and there we go. I can't scroll up and down anymore and this is now at the correct height, but we can now scroll horizontally.
06:21
Now, if you have a fixed height for your header and your title, all you wanna do is replace these values out with a theme. So you might say theme and height 12, for example,
06:32
if it was a high of 12. For now, we'll just leave it at the pixel value and I'll let you tweak this as you need. So we now have a really nice layout to this
06:40
and we can scroll. These will always stay at the very height of this container. We can't go up and down. We can only go left and right.

Episode summary

In this episode, we're focusing on building a horizontally scrollable board layout—think of something like a classic Kanban board where you have columns (like Todo, Doing, Done) all lined up next to each other, and if there are too many columns, you can scroll left and right.

We start by looking at why it's important for the board to scroll horizontally (but not vertically). We want the columns and the cards inside them to always fit neatly within the page, with the ability to scroll across if there are a lot of columns.

We'll set up a wrapper and then add some dummy columns using a simple loop, giving them some basic color and size to see how things look. We play around with Tailwind classes to make sure that the columns stack horizontally, are the right width, and are spaced evenly.

A big focus is on making sure the board takes up just the right amount of vertical space—no more, no less. You'll see how we use Tailwind and the calc CSS function to account for the header and title heights, subtracting these from the full screen height so that everything lines up perfectly. We also discuss dealing with padding, so the content always fits the viewport height.

By the end of the episode, you'll have a horizontally scrollable board layout that doesn't scroll vertically, setting the foundation for styling the columns and cards in future episodes.

Episode discussion

No comments, yet. Be the first!