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

Issue:

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.

 

rtaImage.png

Solution:

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) {

 

$('select.mktFormSelect')

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

.bind('blur', function() {

 

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

 

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

 

}

 

});

</script>

 

 

<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; }

</style>

 

rtaImage (1).png

Attachments

    Outcomes