Select dropdown with fixed width cutting off content in IE
For IE 8 there is a simple pure css-based solution:
select:focus {
width: auto;
position: relative;
}
(You need to set the position property, if the selectbox is child of a container with fixed width.)
Unfortunately IE 7 and less do not support the :focus selector.
Dropdownlist width in IE
Here's another jQuery based example. In contrary to all the other answers posted here, it takes all keyboard and mouse events into account, especially clicks:
if (!$.support.leadingWhitespace) { // if IE6/7/8
$('select.wide')
.bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
.bind('click', function() { $(this).toggleClass('clicked'); })
.bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
.bind('blur', function() { $(this).removeClass('expand clicked'); });
}
Use it in combination with this piece of CSS:
select {
width: 150px; /* Or whatever width you want. */
}
select.expand {
width: auto;
}
All you need to do is to add the class wide
to the dropdown element(s) in question.
<select class="wide">
...
</select>
Here is a jsfiddle example. Hope this helps.
Controlling the drop down list width in IE8 on select
For IE8 you will need to use some JavaScript for this. There are JQuery plugins that do this too, but I think there is no work around without using js.
Take a look at this other SO thread for different approaches and js libraries you might use.
In my experience, the best solutions involve replacing the select element with some other HTML, CSS and JavaScript combination, as trying to change the width of the original select on certain events will move the content on the right of it.
Width issues using HTML select within a DIV using IE
Sadly there is no css solution for this as it relates to the elements behaviour.
As such I will direct you to another source.
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
This changes the width of the element when it is focused on and sets it back when it loses focus. Not very elegant but still allows the whole option to be seen.
Hope this helps.
Related Topics
Ellipsis For Overflow Text in Dropdown Boxes
Float Does Not Work in a Flex Container
Do We Still Need Forward Slashes When Closing Void Elements in Html5
Tooltip with HTML Content Without JavaScript
How to Make Bootstrap 3 Fluid Layout Without Horizontal Scrollbar
Easier Way to Create Circle Div Than Using an Image
How to Style a Mouseover on an Image Map Using CSS
How to Rotate and Postion an Element on the Top Left or Top Right Corner
Use CSS to Remove the Space Between Images
Local (File://) Website Favicon Works in Firefox, Not in Chrome or Safari- Why
How to Correctly Select the First or the Last Child With Css
How to Specify a Local File Within HTML Using the File: Scheme
Select Dropdown With Fixed Width Cutting Off Content in Ie
Why Do <Fieldset>S Clear Floats
How to Make Scrollable Table with Fixed Headers Using CSS
HTML Button Calling an MVC Controller and Action Method
Floating an Image to the Bottom Right with Text Wrapping Around
Best Way to Synchronize Local HTML5 Db (Websql Storage, SQLite) with a Server (2 Way Sync)