SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    Provo, UT
    Posts
    858
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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!
    Convert your dollars into silver coins. www.convert2silver.com

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,398
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    I would say there is not enough information and its probably a css problem.
    Try adding overflow:auto; to the css for the box.

  3. #3
    SitePoint Guru
    Join Date
    Sep 2004
    Location
    Provo, UT
    Posts
    858
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm kind of new to editing CSS files. Where should I insert, "overflow:auto;" ?

    Thanks!

    PHP Code:
    #lightbox{
        
    display:none;
        
    positionabsolute;
        
    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-opacity0.8;
        
    opacity:.80;
        
    filteralpha(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%;

    Convert your dollars into silver coins. www.convert2silver.com

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'd probably need to see all your code but the content area is defined in #lightbox so add your overflow there.

    Code:
    #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; 
    overflow:auto;
    } 
    Of course you may have a more suitable inner element but it all depends on what's going on.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •