IE 7 Select Box Options do not fit large text
-
Friday, November 02, 2007 8:24 PMHey guys,
I've searched high and low for this issue through this forums Search as well as Google and I cannot find any solution.
I currently have a form with a dropdown box (<select>) and a few options.
The text in these options can be a small string of text or it could be a longer string of text.
In FireFox, when the text is too long, it automatically resizes the options to fit the largest peice of text.
In IE 7 however, the options are the same size as the dropdown itself and therefore the longer strings of text are cut off and cannot be seen.
Is there a fix for this somehow?!
Thanks in advance
All Replies
-
Monday, November 05, 2007 2:19 PMin you select element, do _NOT_ specify a width property in the style attribute, or related CSS.
as long as you don't set a width, all browsers will size the select to fit the largest piece of text it contains.
cheers, -
Tuesday, November 06, 2007 6:12 AM
Thanks for the post.
Here i'm also facing the same problem.
In this scenario as per the question we are checking the DropDownlist text in Mozilla as well as In IE7 and i don't want to remove width since if i won't specify width whenever there is a long text automatically the dropdownlist will be increased and perhaps it may come to the second line also.
If u check the same In Mozilla as soon as u will select the DropDownList automatically the long text you will be able to see bacuase it resizes the width in the item area.and not in IE7.
Hence forth can you suggest any alternative way in this.
-
Wednesday, November 07, 2007 5:14 PMIf you trully need to be able to select a long text value, but don't want to display a long select list, then you need to change your approach. ;-)
Instead of a select list, do this instead.
Code Block<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.optionList {
border:1px solid #333333;
height: 200px;
overflow: auto;
width: 250px;
}
label {
display:block;
}
label:hover {
background-color:#eeeeff;
}
</style>
</head>
<body>
<form name="test">
<div class="optionList">
<label for="test1"><input type="radio" name="test" id="test1" value="1"/>Short Option</label>
<label for="test2"><input type="radio" name="test" id="test2" value="2"/>Longer Option</label>
<label for="test3"><input type="radio" name="test" id="test3" value="3"/>Which way to the bus station?</label>
<label for="test4"><input type="radio" name="test" id="test4" value="4"/>Where are my glasses?</label>
<label for="test5"><input type="radio" name="test" id="test5" value="5"/>Will Harry Potter 8 ever happen? I bet that lots of kids would like to read about Harry again!</label>
<label for="test6"><input type="radio" name="test" id="test6" value="6"/>A shorter option</label>
<label for="test7"><input type="radio" name="test" id="test7" value="7"/>Another small option</label>
<label for="test8"><input type="radio" name="test" id="test8" value="8"/>Where is Waldo?</label>
<label for="test9"><input type="radio" name="test" id="test9" value="9"/>When will I get Plasma?</label>
<label for="test10"><input type="radio" name="test" id="test10" value="10"/>Is dry ice really ice?</label>
</div>
</form>
</body>
</html>
Or something like this... (e.g. if you want, you can stop the wrapping from happening...)
good luck! -
Friday, November 09, 2007 7:49 PMI put together a solution that uses the same approach, and also uses JavaScript to highlight the selected option. It looks and feels like a typical select box, but you can also apply styles and embedded HTML to the options. A detailed explanation and the code are available here: http://dev.castwide.com/news/19
-
Friday, January 25, 2008 4:19 PM
Hi there.
The option box thing has been driving me crazy, too.
If you set a title attribute for each option, IE7 will display the entire text in the little title box when the option is moused over. It's not ideal, but it does let people see the entirety of the option.
If you have the means, you can truncate the text between the option tags server-side, then use the title attribute to fill it out. -
Wednesday, May 21, 2008 3:06 PM
Please help me on this issue. I have the similar issue and looked for the solution on google and didn't find anything. Please help me it's urgent. I am using the asp.net dropdowlist and the large text in dropdown is not showing up becuase of the dropdownlist width issue.
-
Wednesday, May 21, 2008 5:10 PMcan you post either generated HTML or the ASP code that you are using?
as mentioned in the first? reply in this thread, setting a width in CSS will break your select list. and in a further reply, if you want options that wrap when they get long, you should work with other elements in a scrollable div. -
Wednesday, May 21, 2008 11:11 PM
Hi,
Another issue to deal with when using select, input and button tags in IE is that they tags do not resize when the page text size is changed (View>Text Size menu). Other Mozilla browsers will resize these tags both vertically and horizontally to adjust for the changed text size of the tag's content.
The IE workaround for this is to specify a font-size for these controls in your stylesheets.
By convention I have been using the same style "class" names that apply to the equivalent Windows' control classes.
ie.
.TextBox{font-size:1em;}
.ComboBox{font-size:1em;}
.Command{font-size:1em;}
So...
<input type="text" class="TextBox" id="txtInput" value="enter your value here"/>
<button id="cmdClick" class="Command">Click Me</button>
<input type="submit" id="cmdSubmit" class="Command" value="Submit"/>
<select class="ComboBox" id="cboItems">
<option...... etc
use the same class names for the cssClass attribute of asp.net controls.
You will find that your controls will then nicely resize to accomodate the users Text size preferences.
Regards.
-
Wednesday, June 18, 2008 3:59 PM
I was having the same problem. I wanted to use a DataBound DropDownList control in an ASP.NET 2 page. The long options in the DropDownList would stretch the DropDownList and throw off the layout of my form.
I tried the following approach, where I test for the length of each option during the DropDownList's OnDataBound event. For my form, I wanted to keep the option text in the DropDownList to no more than 30 characters. The following code loops through the options and performs the following on any option that has a length greater than 30 characters:
-
Adds a "title" attribute to the option with the text at the full length so that when the option is rolled over it will display a pop-up of the full text.
-
Truncates any option that is over 30 characters by displaying the first 24 characters, followed by an ellipsis, and then the last 5 characters.
Code SnippetProtected Sub MyDropDownList_DataBound(ByVal sender As Object, ByVal e As System.EventArgs)
For Each item As ListItem In MyDropDownList.Items
If item.Text.Length > 30 Then
"title", item.Text)item.Attributes.Add(
item.Text = item.Text.Substring(0, 24) &
"..." _& item.Text.Substring(item.Text.Length - 5, 5)
End If Next End SubI have tested this approach in IE and Firefox and it seems to work fine. It displays an option that is over 30 characters, such as:
"This is an example of an item which is too long and which would badly mess up my nice neat form"
In the following, truncated format:
"This is an example of an ... form"
Yet, when you rollover the option in the DropDownList, the full text is displayed in the title popup.
-
-
Wednesday, June 18, 2008 5:15 PMNice solution...
Have you tried it in IE6 yet?... there is another thread in this forum that indicates that the title attribute in IE6 does not produce a tooltip on a select list, or any of the option elements within it. :-( -
Friday, July 03, 2009 7:31 AM
-
Thursday, April 19, 2012 7:51 PM
Try this in your css (will work for IE8):
select:focus
{
width: auto !important;
}And for IE7 (this isn't perfect but it will only target IE7)
*select
{
width: auto !important;
}
Hope that helps
