Select Cuts Off Options In IE7 and above (Fix)

This is common problem for all now a days:


I have used this to solve my problem for IE version 7 and above. Surely it will work.

Solution 1:

I have added this on my HTML select control.

<select class="limited-width" onmousedown="if(document.all) this.className='expanded-width';"
                        onblur="if(document.all) this.className='limited-width';" onchange="if(document.all) this.className='limited-width';">
                        <option>Short option</option>
                        <option>Much longer option that will overflow the select</option>
                    </select>

CSS class is defined as follows:
 <style type="text/css">
select.limited-width
{
    width: 125px;
    position: static;
}
select.expanded-width
{
    width: auto;
    position: absolute;
}
</style>

Solution 2 : using JQuery

<script src="JS/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="JS/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="JS/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(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);
    </script>


Hope this will help you....


Happy Learning..........................Enjoy....:)