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?Hi there zinn123,
and a warm welcome to these forums.
try it like this...
<!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>
cootheadThat did the trick. Thank you, thank you, thank you!!No problem, you're welcome.
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?Hi there zinn123,
and a warm welcome to these forums.
try it like this...
<!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>
cootheadThat did the trick. Thank you, thank you, thank you!!No problem, you're welcome.