Grow your CSS skills. Land your dream job.

Last updated on:

Fix Select Dropdown Cutoff in IE 7

Run (at least the "Usage" part below) after you've loaded jQuery and either at the end of the page or in a DOM ready statement. Note that this fix does create a clone of the select, which will submit itself with the form data, but the name value has been changed to include "-clone" at the end of it, so just be aware of that especially if you are serializing all inputs.

Thanks to Craig Hoover.

// Safely use $
(function($) {

	$.fn._ie_select=function() { 
	
		return $(this).each(function() { 
		
			var a = $(this),
			    p = a.parent();
		
			p.css('position','relative');
		
			var o = a.position(),
			    h = a.outerHeight(),
			    l = o.left,
			    t = o.top;
		
			var c = a.clone(true);
		
			$.data(c,'element',a);
		
			c.css({
				zIndex   : 100,
				height   : h,
				top      : t,
				left     : l,
				position : 'absolute',
				width    : 'auto',
				opacity  : 0
			}).attr({
				id    : this.id + '-clone',
				name  : this.name + '-clone'
			}).change(function() {
				$.data(c,'element')
					.val($(this).val())
					.trigger('change')
			});
				
			a.before(c).click(function() { 
				c.trigger('click');
			});
		
		}); // END RETURN
	
	}; // END PLUGIN
        
        // Usage
	if ($.browser.msie) {
		$('select')._ie_select();
	}

})(jQuery); // END SAFETY

Reference URL

Comments

  1. sivananda raju

    Thanks for the post. Solved my problem.

  2. Pierpaolo
    Permalink to comment#

    can you please explain, in plain english, how to add this script to a page?
    note that I have more than one select to fix in the same page…
    Thanks in advance

  3. Pierpaolo
    Permalink to comment#

    Update: I have found a way to apply it, but, since, as I said, in my webpage there are more than one select dropdown, and these dropdown are dinamically generated, there are some issues:
    1. when a dropdown is regenerated, the width is back to the “bugged” one
    2. since the dropdowns are next to each other, the click on the dropdown on the right is caught by the one on the left…

  4. Dennis
    Permalink to comment#

    Thanks. It solved my drop down cut off issue in IE. But I have one issue, when click on the outer border of drop down it is not working.

    • Thimmaiah

      Hi, I have found a way to apply it, but, since, as I said, in my webpage there are more than one select dropdown, and these dropdown are dinamically generated, there are some issues:

      1)alert message is coming 3 times.

      please help to solve this one

  5. Solved My problem. Thanks for this.

  6. Aan
    Permalink to comment#

    thank for sharing bro, this is work for me

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".