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

Comments

  1. User Avatar
    sivananda raju

    Thanks for the post. Solved my problem.

  2. User Avatar
    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. User Avatar
    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. User Avatar
    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.

    • User Avatar
      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. User Avatar
    warun

    Solved My problem. Thanks for this.

  6. User Avatar
    Aan
    Permalink to comment#

    thank for sharing bro, this is work for me

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag