Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts

    DropDown too big for the container..how to fix?

    Hey all.

    I have a dropdown that needs to work in IE, Netscape, Firefox, Mac Net, Safari.

    anyhow..

    the dropdown is breaking out of a container if the contents (derived from a database) are too long.

    Is there a way to "clip" the dropdown, but when you click on it...it expands to the desired length.

    <select>
    <option> this is a good width
    <otpion> this is way too long cause it smells like taffy and popcorn shrimp
    <option> this is fine too even like this
    </select>

    Now, the view would see perhaps a select box that is perhaps 300 pixels wide..but when you expand it...you'll be able to see all entries..even the long one.???

    Please advise.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm maybe you can get some ideas from this. It uses onfocus to change the width and onblur to change it back to its normal state. Because its absolutely positioned it has no effect on the text.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    #select {
    width:150px;
    float:left;
    position:relative;
    }
    #select select {
    width:150px;
    position:absolute;
    top:0;
    left:0;
    }
    #content {
    margin-left:155px;
    }
    </style>
    </head>
    
    <body>
    <div id="select">
    <select name="" onblur="this.style.width='150px'" onfocus="this.style.width='350px'">
    <option> this is a good width </option>
    <option> this is way too long cause it smells like taffy and popcorn shrimp </option>
    <option> this is fine too even like this </option>
    </select>
    </div>
    <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thanks -- you have the rigth idea of my problem. Your solution is fine, but its a little dodgy in different browsers.

    Isn't there a more elegant solution that is crossbrowsers?

    can you add 'newlines' to options? that might work..

    please advise.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    No you can't add new lines. You could I guess look into optgroup I'm not sure exactly what it does never used it. Or just make the select a set width and deal with the fact that part of the options are cut off, or set your generated content to not output such long options.

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you look down at the right you see in the codingforums.com's nav optgroup is used
    CATdude about IE6: "All your box-model are belong to us"

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    349
    Thanks
    2
    Thanked 0 Times in 0 Posts
    what is the benefit of optgroup?...seems like a normal dropdown to me..

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Its just meant to seperate the different options, I don't think it suits your needs. You don't have many options here (no pun intended) other than the things I have told you already. A select menu isn't too customizable.


  •  

    Posting Permissions

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