Welcome

Hello, Welcome to my blog. If you like feel free to refer others

Friday 20 January 2012

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....:)


No comments:

Post a Comment