Fixing long dropdown values in IE

Document created by 0990c59b444c76027d96735c1a399d72e146ac44 on Dec 5, 2014Last modified by 7c0530b8c4efdd5734ac0e37c02a18c0a98056cf on Sep 27, 2017
Version 3Show Document
  • View in full screen mode


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