Flexigrid + IE9 height:auto

The problem is very elemental.

If you go to http://flexigrid.info/ with IE9, and explore the 'example 2' section, and the columns resize over the visible place, that it will activate the horizontal scrollbar. And you hover the rows, you experience growing up the Flexigrid size. I don't e开发者_StackOverflow社区xperience IE7 and IE8, only IE9. This problem has by height: auto configurate. I didn't find solution yet. Please help me!

Actually, the solution that @Szenti posted will only work for 1 flexigrid on the page, if there are multiple, it will only takes the height value of the 1st bDiv it founds and apply the fix to all.

My revised version I think will apply to situations where there are many flexigrids on the page at one time.

ie9Fix: function() {
            var bDivH = $(this.bDiv).height();
            var bDivTH = $('table', this.bDiv).height();
            if(bDivH != bDivTH && p.height=='auto') {
               $(".bDiv").css({height: bDivTH + 18});
            }
        },

I had this same issue. Thanks @Szenti for the Answer, however, once this was in place I then had flexigrid resize issue when the results in the table where regenerated via AJAX. This occured in latest Chrome, Firefox and IE7/8.

So I added a (some would say dirty) browser sniff into the mix.

Global var:

var ie9 = false;
if ($.browser.msie && parseInt($.browser.version, 10) == 9) {
    ie9 = true;
}

Then where @Szanti's method is called I just wrap it in:

if (ie9) {
 this.ie9Fix();
}

Now works a treat in all browsers.

The solution:

You have to edit the flexigrid js. Append the g object with this:

ie9Fix: function() {
if($(".bDiv").height() != $(".bDiv table").height() && p.height=='auto') {
   $(".bDiv").css({height: $(".bDiv table").height() + 18});
}
},

You have to call ie9Fix function in 2 places

• In the g.dragEnd() function last row (this.ie9Fix();)

• In the g.addRowProp() you have to write a new event:

  .mouseleave(function(){ g.ie9Fix(); })

That's it!