Vertical scrollbar inside "Lightbox Gone Wild"

The “Lightbox Gone Wild” has been an excellent thing for my website. It allows me to display a page inside of a lightbox for the user or even sometimes a form. But how do I go about adding a vertical scrollbar to a lightbox like this? Right now I’m limited to the amount of text/information that will fit into the lightbox.

Thanks!

I would say there is not enough information and its probably a css problem.
Try adding overflow:auto; to the css for the box.

I’m kind of new to editing CSS files. Where should I insert, “overflow:auto;” ?

Thanks!

#lightbox{
	display:none;
	position: absolute;
	top:50%;
	left:50%;
	z-index:9999;
	width:500px;
	height:400px;
	margin:-220px 0 0 -250px;
	border:1px solid #fff;
	background:#FDFCE9;
	text-align:left;
}
#lightbox[id]{
	position:fixed;
}

#overlay{
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:5000;
	background-color:#000;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);
}
#overlay[id]{
	position:fixed;
}

#lightbox.done #lbLoadMessage{
	display:none;
}
#lightbox.done #lbContent{
	display:block;
}
#lightbox.loading #lbContent{
	display:none;
}
#lightbox.loading #lbLoadMessage{
	display:block;
}

#lightbox.done img{
	width:100%;
	height:100%;
}

I’d probably need to see all your code but the content area is defined in #lightbox so add your overflow there.


[COLOR=#000000][COLOR=#FF8000]#lightbox{ 
    [/COLOR][COLOR=#0000BB]display[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]none[/COLOR][COLOR=#007700]; 
    [/COLOR][COLOR=#0000BB]position[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]absolute[/COLOR][COLOR=#007700]; 
    [/COLOR][COLOR=#0000BB]top[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]50[/COLOR][COLOR=#007700]%; 
    [/COLOR][COLOR=#0000BB]left[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]50[/COLOR][COLOR=#007700]%; 
    [/COLOR][COLOR=#0000BB]z[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]index[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]9999[/COLOR][COLOR=#007700]; 
    [/COLOR][COLOR=#0000BB]width[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]500px[/COLOR][COLOR=#007700]; 
    [/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]400px[/COLOR][COLOR=#007700]; 
    [/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]:-[/COLOR][COLOR=#0000BB]220px 0 0 [/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]250px[/COLOR][COLOR=#007700]; 
    [/COLOR][COLOR=#0000BB]border[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]1px solid [/COLOR][COLOR=#FF8000]#fff; 
    [/COLOR][COLOR=#0000BB]background[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#FF8000]#FDFCE9; 
    [/COLOR][COLOR=#0000BB]text[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]align[/COLOR][COLOR=#007700]:[/COLOR][COLOR=#0000BB]left[/COLOR][COLOR=#007700]; 
[B]overflow:auto;[/B]
} [/COLOR][/COLOR]

Of course you may have a more suitable inner element but it all depends on what’s going on.:slight_smile: