www.webdeveloper.com
Results 1 to 4 of 4

Thread: constraining the width of a drop down menu when open

  1. #1
    Join Date
    Apr 2005
    Posts
    3

    constraining the width of a drop down menu when open

    Does anyone know how you can control the width of a drop-down menu when it is open? I've got a plain <select> menu that I've constrained to width: 550px in my css. It appears to be that width when it's closed. However, it's got a few long options in it, and when you open it in Firefox, the menu opens up to the size of the longest option in the menu. It is actually popping open so wide that the scroll bar at the right side is out of the viewable area of the screen, so you have to make your browser window much smaller and drag it over to the left side of the monitor in order to use the scroll bar for the menu.

    It is working fine in IE (the menu when opened is the same size as the menu when closed), which is odd since normally that's the one I struggle with.

    Does anyone have any ideas about how I might fix this in Firefox? Is it even possible to control the size that the menu when it opens up?

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there zinn123,

    and a warm welcome to these forums.

    try it like this...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>fixed select width</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    select {
         width:550px;
    }
    option {
         width:534px;
         overflow:hidden;
    }
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <form action="#">
    <div>
    <select>
    <option></option>
    <option>big option</option>
    <option>big option big option big option big option big option big option big option big option big option big option big option big option big option big option big option big option</option>
    </select>
    </div>
    </form>
    
    </body>
    </html>
    coothead

  3. #3
    Join Date
    Apr 2005
    Posts
    3
    That did the trick. Thank you, thank you, thank you!!

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    No problem, you're welcome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles