By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,506 Members | 1,881 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,506 IT Pros & Developers. It's quick & easy.

Need help to apply style to drop down list

P: n/a
Hi all,
I have a drop down list with some items, and one of the item contains
very long text. I want to limit the width of the drop down itself, but when
I click down arrow to pull down the content, I want to make <option> item
wide enough to show all characters.

<html>
<head>
<style type="text/css">
option.wide
{
width:auto;
}
select
{
width:100px;
}
</style>
</head>
<body>
<form>
<select>
<option>This is red</option>
<option>This is blue</option>
<option>This is green</option>
<option class="wide">This is wide dhf sdlk hsdlh gldh gldek hjldr hldrh
hdrjh gh gdhg jsdghfaskjg fg f gasfkg</option>
</select>
</form>
</body>
</html>

OK, now the problem is, if I apply CSS to <select> object, the width of
<option> object will be limited too. If I remove CSS for <select>, the whole
drop down will be very wide.

Is there a solution?

Thanks!

--
WWW: http://hardywang.1accesshost.com
ICQ: 3359839
yours Hardy
Nov 19 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
the browser <select> does not support this. you can write your own select in
javascript using a, span, a hidden field, an image and a flyout menu. look
at any of the javascript combo box's for starting code.

-- bruce (sqlwork.com)

"Hardy Wang" <ha*******@hotmail.com> wrote in message
news:ul**************@TK2MSFTNGP15.phx.gbl...
Hi all,
I have a drop down list with some items, and one of the item contains
very long text. I want to limit the width of the drop down itself, but
when I click down arrow to pull down the content, I want to make <option>
item wide enough to show all characters.

<html>
<head>
<style type="text/css">
option.wide
{
width:auto;
}
select
{
width:100px;
}
</style>
</head>
<body>
<form>
<select>
<option>This is red</option>
<option>This is blue</option>
<option>This is green</option>
<option class="wide">This is wide dhf sdlk hsdlh gldh gldek hjldr hldrh
hdrjh gh gdhg jsdghfaskjg fg f gasfkg</option>
</select>
</form>
</body>
</html>

OK, now the problem is, if I apply CSS to <select> object, the width of
<option> object will be limited too. If I remove CSS for <select>, the
whole drop down will be very wide.

Is there a solution?

Thanks!

--
WWW: http://hardywang.1accesshost.com
ICQ: 3359839
yours Hardy

Nov 19 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.