Using FooTable on jQuery tabs about footable HOT 5 CLOSED

Hi phuvf,

I've had a chance to play around and I think I've found a solution for you, if you take a look at the fiddle you'll see it now works correctly. The reason for this problem was that when the plugin is loaded or the window resizes, FooTable looks at the breakpoints and decides how to apply itself. The tables on the hidden tabs are inheriting the display:none css style from the tabPanel and when something is hidden using this style it's width and height is commonly returned as 0. I'm not sure why your's is coming back as 100px unless it's a min-width value set somewhere in jQuery.UI for the tab panel or something. Due to this combination of the display:none style and the way the width and height is then reported FooTable basically takes the lowest breakpoint and applies it to the hidden tables.

To work around this problem I've hooked into the jQuery.UI's tab.activate event and then called the resize function to force the table to display correctly at it's visible width.

Fix:

$(document).ready(function () {
    $('#tabs').tabs({
        activate: function(e, ui){
            ui.newPanel
                .find('.footable')
                    .filter(':visible')
                    .each(function(){
                        var ft = $(this).get(0).footable;
                        ft && ft.resize();
                    });
        }
    });
    $('.footable').footable();
});

I've got quite a lot of changes I want to make to the plugin at the moment including the ability to trigger methods using the constructor call which would make this sort of integration much easier.

Example:

$(document).ready(function () {
    $('#tabs').tabs({
        activate: function(e, ui){
            ui.newPanel.find('.footable').footable('resize');
        }
    });
    $('.footable').footable();
});

Let me know if this work around sorts out the issue for you and once I've got a chance to implement the changes I want to make you will be able to use something close to the code shown in the example. You will obviously still need to use the tab.activate event but I think this approach is better than the polling approaches used to detect visibility changes which would have a delay anyway between checks so you may see a flash as the columns change.

Thanks
Steve

from footable.

Hey phuvf,

1. That's exactly what we intended the createDetail function to be used for :) You can either modify it in the footable.js file for a global change or just supply it as an option for more specific circumstances.
2. I must admit I don't use jQuery.UI so haven't tested this issue out yet, if you can provide a jsfiddle showing your issue that would be great. To add FooTable into the fiddle just click the Add Resources link on the left and use the raw Git url: https://raw.github.com/bradvin/FooTable/master/js/footable-0.1.js

Thanks
Steve

from footable.

Steve,

Thanks for the note about createDetail. I'll try not to re-invent the wheel.

There's a fiddle at http://jsfiddle.net/gFxyk/1/. Seems to be a webkit (Chrome/Firefox) issue.

from footable.

Steve,

That work great - thanks for the help!

from footable.

why is it not working fine in my proj? help me sirs pls :(

from footable.