Playing
04. Styling a scrollable board
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
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.
31 episodes•2 hrs 27 mins•11 months ago
Overview
Get ready to master drag and drop sorting in Livewire, by building a Trello clone.
We’ll start out by building the interface completely from scratch, then add the ability to sort columns and cards, including moving cards around columns. As we sort everything, we’ll keep the database perfectly updated with the new order.
Our Trello clone will also allow us to edit column titles inline, edit cards and add notes, archive cards and columns, and put them back on the board.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!