IE8 expand select width with jquery

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

Include the script only for IE8:

<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. Sed diam enim, pharetra ac tempus eu, ullamcorper a nibh. Etiam dui urna, adipiscing fermentum semper sit amet, molestie nec tortor. accumsan ullamcorper. Nam sem lorem, pellentesque nec molestie eu, luctus quis sem. Maecenas ac dolor eu nunc posuere semper.

Within table

	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Do not shorten

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. Sed diam enim, pharetra ac tempus eu, ullamcorper a nibh. Etiam dui urna, adipiscing fermentum semper sit amet, molestie nec tortor.