Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 2

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

jQuery - Lightbox - Overlay is too low

Hi, I'm following the course to make a lightbox with jQuery.

Its the TreeHouse course jQuery Basics > Creating a Simple Lightbox > Perform:Part2

Everything works fine for me, but the overlay.

Namely, the content of my original page is higher than the viewport. So when I make the overlay with CSS

#overlay {
    background: rgba(0,0,0,0.85);
    width: 100%;
    height: 100%;   /* This line makes it only 100%, buts that is not enough in my case as may original page is higher than 100% */
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}

That overlay only shades the area of the visible the viewport. But if I later scroll down to where the rest of my content is, there is no shadow and it looks ugly.

I've tried giving the overlay width: 900% but than I get a really long scroll which cannot be the final solution.

What would you do?

4 Answers

cesare
cesare
15,180 Points
cesare
cesare
15,180 Points

Elements inside of others goes always out of the parents (if they are bigger than parents) because it have by default "overflow" set to visible.

Use this in the parent element:

overflow: hidden;

More here.

:)

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Thank you, Cesare. I know what you mean. But my question is about a specific problem linked to a specific Treehouse video. I guess I was not very good at asking it. So here I'm tying to explain what I really need:

https://teamtreehouse.com/forum/how-to-make-an-overlay-for-a-page-that-has-a-scroll

Hopefully someone will be able to help me.

Have a nice time, Maja

Tim Sweeney
Tim Sweeney
15,101 Points
Tim Sweeney
Tim Sweeney
15,101 Points

set the position to fixed instead of absolute.

Henrique Machuca
Henrique Machuca
5,611 Points
Henrique Machuca
Henrique Machuca
5,611 Points

I´m having the same problem, and the thing is that after I set the position to fixed and click on the image to run the overlay, the image shows in the entire screen. It doesn´t matter if it´s small or not, since the overlay is fixed, the image appended to it uses the entire screen as well.

Any ideas on how to fix this?

Thank you!

Tim Sweeney
Tim Sweeney
15,101 Points
Tim Sweeney
Tim Sweeney
15,101 Points

child elements do not inherit it's parents position values. are you sure your not applying it to the image as well? if not what are the images height and width set to? try setting the images width to 50% and see what happens.