Fixing long dropdown values in IE

Document created by Jamie Carey on Dec 5, 2014Last modified by Vishal Sharma on Jun 26, 2018
Version 4Show 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

Is this article helpful ?