473,804 Members | 2,190 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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">Th is 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 1985
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*******@hotm ail.com> wrote in message
news:ul******** ******@TK2MSFTN GP15.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">Th is 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
1481
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 per page. That's in effect 30 style sheets per page, not classes - each sheet can have as many style classes as you want. http://support.microsoft.com/default.aspx?scid=kb;en-us;262161 Unfortunately, this presentation library generates...
4
1577
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 something with setting height during the focus events to simulate drop down list However if there are drop down list style or dropdown list then it would be better for to use them.
1
7208
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 list to the top of the page or to the bottom of the page. So I fixed the size of that control as 5. Now the size of the list has increased to 5 & the list display size also becomes large in Length &
6
2197
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
9594
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10350
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10096
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9174
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7638
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6866
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5673
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4311
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3834
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.