Solved

Select tag drop down values.

Posted on 2006-11-15
7
222 Views
Last Modified: 2010-04-09
Hi experts,
   I have select box which has fix width let say 100px.
If options contains value which is more than width, then
how to show full value to user without increasing size of select.

manish.
0
Comment
Question by:Manish
7 Comments
 
LVL 11

Author Comment

by:Manish
ID: 17945843
after clicking on drop down arrow.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17946188
It may be possible with Javascript to show the full text of the item on hovering.  Without increasing the size of the box you don't really have any pure HTML/CSS options
0
 
LVL 11

Author Comment

by:Manish
ID: 17946292
so do you have javascript code?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Accepted Solution

by:
bowen18 earned 50 total points
ID: 17950585
0
 
LVL 11

Author Comment

by:Manish
ID: 17953798
But width is increasing in IE , i dont want that.
It is working correct in firefox.

 
0
 
LVL 11

Expert Comment

by:ethoths
ID: 17955768
You need to set the width using css...

        <asp:DropDownList ID="DropDownList1" runat="server" style="width:100px" />

or

        <select name="DropDownList1" id="DropDownList1" style="width:100px"></select>
0
 
LVL 12

Expert Comment

by:jessegivy
ID: 17975888
There are no easy options here.  I've tried to get tooltips to work with option tags with no luck.  The other option would be to dynamically add multiple options and write lengthy code to link multiple options together.  The short answer and most accepted I believe, is to truncate the text, or simply increase the size of your dropdown and accomodate in your design.

...the standard if you decide to truncate is to use elipsis (...) at the end to indicate there's more text that's not being displayed.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
return false must be hit after calling certain command 10 43
..ignore the Question 1 21
href return to normal window 5 28
Table header must be on top 2 21
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question