Introduction

This page demonstrate the use of jQuery plugin ie_expand_select_width to fix select box width issue on IE8. Contrary to several other solutions, this script keep the page layout intact and is keyboard friendly.

See the article on css-tricks.com for a full explanation of the problem.

For demo purpose the script is active for all browsers on this page, but it only works properly with Internet Explorer 8.

Usage

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<!--[if IE 8]>
	<script type="text/javascript" src="ie_expand_select_width.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('select').ieExpandSelectWidth();
		});
	</script>
<![endif]-->

Demo

Simple

Within text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. s1: no label, short s1: no label, long: Lorem ipsum dolor sit amet, consectetur adipiscing elit. this text will not appear this text will not appear either Sed diam enim, pharetra ac tempus eu, ullamcorper a nibh. Etiam dui urna, adipiscing fermentum semper sit amet, molestie nec tortor. s2: no label, short s2: no label, long: Lorem ipsum dolor sit amet, consectetur adipiscing elit. this text will not appear this text will not appear either s3: no label, short s3: no label, long: Lorem ipsum dolor sit amet, consectetur adipiscing elit. this text will not appear this text will not appear either accumsan ullamcorper. Nam sem lorem, pellentesque nec molestie eu, luctus quis sem. Maecenas ac dolor eu nunc posuere semper.

Within table

Do not shorten

s6: only short 1 s6: only short 2 s6: only short 3

Do not break other events

Custom style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sem lorem, pellentesque nec molestie eu, luctus quis sem. Maecenas ac dolor eu nunc posuere semper. s8: no label, short s8: no label, long: Lorem ipsum dolor sit amet, consectetur adipiscing elit. this text will not appear this text will not appear either Sed diam enim, pharetra ac tempus eu, ullamcorper a nibh. Etiam dui urna, adipiscing fermentum semper sit amet, molestie nec tortor.

100% width does not expand too much

Do nothing for multiple choices

Also expand max-width