busboy
January 4, 2011, 6:55pm
1
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!
Rubble
January 4, 2011, 7:02pm
2
I would say there is not enough information and its probably a css problem.
Try adding overflow:auto; to the css for the box.
busboy
January 6, 2011, 2:19am
3
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%;
}
PaulOB
January 6, 2011, 10:31am
4
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.