That will provide a really nice look and effect, then we will move on to fix this problem here where we have a course appear above the My Schedule Label.

Okay, so let's go ahead and get started. Let's go into our code and let's close our terminal, and the first thing I would like to do is basically explain how this is going to work. So we need a container, we need everything to not scroll, we need the overflow to be hidden and not be able to scroll this. Then we need a container where our library will be put in so we can scroll just the library div, okay so let's do this.

Let's go into our library.js and let's wrap this in a container, our title and our courses that are available in the library, so I'm going to hit command + x then I'm going to write div className is equal to library_container I'm going to close that and paste this back in here. I used option + shift + f to format it. Okay now I'm going to rename this from title to librarycontainer_title.

library.js

render() {
    return (
        <div className="library">
            <div className="library__container">
                <h1 className="library__container__title">Course Library</h1>
                {this.renderCourses()}
            </div>
        </div>
    );
}

That way in library.scss we can still use title with in our container. So let's write the container in scss now, let's say &container, &__title.

library.scss

&__container {
    &__title {
        color: $color-blue;
        font-family: $font-alegreya;
        font-size: 34px;
        font-weight: bold;
        border-left: 2px solid $color-blue;;
        padding: 20px 40px;
    }
}

Okay cool, that's the first step. Let's look and see what we have in the browser, okay so everything's kind of same except for you'll notice that this looks a lot better and its hidden.

So that's all great except for these are to kind of condensed and when we put too many in, or we open too many, we got the same kind of problem we were having before, and you can't even click on these anymore for some reason. So that's probably a result of what we just did, but we're going to fix that.

So what we need to do is go into our library here and right now we're saying padding left and top 100px, let's get rid of that and then in our browser here you'll see that it goes up to the top here, thats not good, we don't want that effect, but we need to get rid of it there and put it somewhere else. What we want to do right here is say overflow is hidden and the width and height are both 100% of the parent container.

library.scss

overflow: hidden;
width: 100%;
height: 100%;

So same thing, let's open these and take a look and see what happens, alright same kind of deal is go on here. Now we just have it primed so we can do something with it, so let's go into our code and let's go into our container and this is where we'll be doing the scrolling. We are going to be doing the scrolling in the container everything else is going to be static, so to make sure everything is static let's copy this overflow hidden and go into our main.scss and paste it at the bottom here in our .home.

Alright, let's try that in the browser and you'll see now that we can't even scroll down even though we have content that we know is down there. But that's good because we don't want any of this to scroll, we want everything to be static except for we want to be able to scroll this course library, so let's go make that possible.

Let's go into our course library, so library.scss in the container, and what we want to do here is basically put our grid in here so let's take our grid and put it in here. The reason we're doing this is because our h1 for the title and our courses are no longer just within the library they are within the container.

library.scss

&__container {

    display: grid;
    grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
    grid-row-gap: 22px;
}

Okay cool, save that and let's go back to the browser and let's see what happens, it should fix up our grid. Okay, our grid is looking a lot better, although we still can't scroll and thats not good.

So let's figure out what we have to do now. In our container let's say padding top is 7%, and then padding left is about 5%,

library.scss

&__container {

    display: grid;
    grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
    grid-row-gap: 22px;

    padding-top: 7%;
    padding-left: 5%
}

Now let's go back and look, and you'll see we have that effect back which is what we want, and we can add our courses. But we still can't scroll so let's add in that scroll ability now, all we have to do is say overflow-y scroll and it should require a little more code, but it might not, okay it does I expected that. What we have to do is this, okay let's think we're going to have to say position is absolute, and then if we do that everything is going to break and do bad stuff right, it's not going to look good.

Although you'll notice that this is where it needs to be which is great, so that's good. And if you think about how absolute position works you'll realize it's kind of molding to our entire page here right so we just need to tell it to mold to it's parent so let's go in library.scss and do that.

Let's go into library and say position is relative.

library.scss

.library {
    grid-column: library-s/library-e;
    grid-row: 1/-1;

    overflow: hidden;
    width: 100%;
    height: 100%;

    position: relative;

Okay cool, now lets try it. Okay, sweet so it changed a little bit but we have to specify the width and height for this container or its going to look weird like this.

Okay, so let's go in library.scss and in the container lets say height is 100% and width is 95%, let's try that.

Okay sweet, so the reason we do 95 is actually what we don't want to do, my bad, let's change it to 100, I was thinking of a different approach, so let's do width and height are 100%. Okay sweet that looks great except for it's got this really nasty bar here, we don't want that in there.

but the only way to get rid of this, you can't get rid of it programmatically you basically just have to manually hide it. It's kind of a hackie way to do it but it's the only way you can do it as far as I know. I've done a lot of researching to find a better solution over the past few months and I haven't found one, so this is the best way to do it as far as I know.

So what we're going to do is say right -10px. Now sense this is absolute positioning we can do this.

library.scss

&__container {
    display: grid;
    grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
    grid-row-gap: 22px;

    padding-top: 7%;
    padding-left: 5%o
    overflow-y: scroll;

    height: 100%;
    width: 100%;

    right: -10px;

    positon: absolute;

So it's going to pull this to the right and its gone, although it makes this bar look ugly because thats behind it too. So we are missing some of those pixels right, so a pretty simple fix, all we need to do is remember that we pulled it to the right 10px, I'm going to put this after positioning. I think of position and right the same way I think of display and template rows or something like that they kind of go hand-in-hand, when you set position absolute you can do stuff with right, top, left, and bottom that's why I put it below.

Okay cool, so let's go ahead and fix this problem where it's kind of cutting that off except for we can't just get rid of the right -10px because thats going to bring back the bar, technically the bar is still there it's just hidden. The reason it's able to hide is because we said overflow is equal to hidden and if we comment that out it should still be there, you see, it's still there.

We've pulled it to the right 17 pixels except for its not hiding it, so we need to hide whatever is outside of the container, so let's go add in that margin finally now that I've talked about it forever. Let's try it in the libraryCourse.scss basically all I want to do is I want to add 10px here to the template columns.

Okay, so thats our space I'm just going to mark it as space so people know. I'm going to call it scroll-bar-space because if you just call it space your still going to be confused because it's still kinda missing. Okay, so you'll now see that, that looks a lot better and we can still scroll. If you open up objects you cant see anything which is a problem.

So let's see, thats probably a problem with our columns. Let's look at our description 1/1, 2/3 on the column. I'm going to get rid of the space and see if that fixes it, and if it doesn't then its something else probably the overflow. Okay, yeah that got rid of it. So basically we can either do this and just be extra care full with our naming in here.

Or we could not do that and we could just say padding right 10px, alright it looks like it's still showing it, huh let's try margin, huh that is strange it shifted our Course Library container over a little bit, padding should be the exact opposite. Anyway you see that that works and it looks good, it hides the bar there and we can scroll and we can open up these large descriptions and everything looks good.

Okay so yeah, thats pretty great. Let's kind of pull it from the bottom because I don't like how it touches the bottom there, so kind of like we have at the top. So let's close our libraryCourse.scss and let's go to library.scss and let's just say padding bottom is 5%. Okay, and that looks a lot better.

Actually as matter fact, let's just do the height of the progress tracker so when we scroll all the way down here it goes above it. So the progress tracker if I remember is 76px, I'm just going to say padding bottom is 76px.

library.scss

&__container {
    display: grid;
    grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
    grid-row-gap: 22px;

    padding-top: 7%;
    padding-left: 5%;
    padding-bottom: 76px;
    overflow-y: scroll;

Okay so look, you can see that it's 76 pixels exactly

Okay, that looks really good we cant scroll past this, we can scroll up here and I'm really happy with how this turned out, I didn't expect it to turn out as good. Okay, so there's still a few problems in our app before we are done with it. First problem is the placement of our classes on the My Schedule side.

The next problem is the checks on all of these classes, we only what the checks to be on the enrolled courses. Let's go ahead and fix those in the next video, so let's hit command + j in vs code to open the terminal and lets commit our code.

Terminal

git status
git add .
git commit -m "overflow scrolling on library component"

Okay, I'll see you in the next video.

Resources

Source code