473,386 Members | 1,679 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Need help to apply style to drop down list

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
1 1957
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Rob Nicholson | last post by:
We're using a well known presentation layer library to implement complex controls on an intranet site. IE has the following limitation which effectively means that you can only have 30 <STYLE> tags...
4
by: GS | last post by:
in visual studio 2005 express VB I found mention of drop style for listbox but so far my searches came up empty as to how and what they are. I was to set height and I figure I can probably do...
1
by: Valli | last post by:
Hi, I need to populate a dropdownlist control with values. Number of items for that list exceeds 100. I am using Html select list option. When I drop down the list control, it shows the item...
6
by: shapper | last post by:
Hello, I am creating a form that includes a few JQuery scripts and TinyMCE Editor: http://www.27lamps.com/Beta/Form/Form.html I am having a few problems with my CSS: 1. Restyling the Select
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.