With long options in a select (dropdown) list, Internet Explorer will not expand the values as Firefox, Chrome and other browsers will do. This makes reading the values in the dropdowns impossible.




Insert the following Javascript/CSS in a Custom HTML box on your landing page. This script will only run if IE is used.


<script src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">

var $ = jQuery.noconflict();



$(document).ready(function() {


if ($.browser.msie) {




.bind('focus mouseover', function() {




$(this).parents('li').addClass('liexpand'); })


.bind('click', function() { $(this).toggleClass('clicked'); })


.bind('mouseout', function() { if (!$(this).hasClass('clicked')) {




$(this).parents('li').removeClass('liexpand'); }})


.bind('blur', function() {


$(this).removeClass('expand clicked');


$(this).parents('li').removeClass('liexpand'); });








<style type="text/css">


select.expand { width: auto !important; position: absolute; }

li.liexpand { padding-bottom: 22px !important; padding-bottom: 9px !important\9; }
*+html li.liexpand { padding-bottom: 9px !important; }



rtaImage (1).png

Is this article helpful ?