2

I have 2 tables in each tab in bootstrap tab with hidden divs active when tab is clicked. The default tab works fine. But the rest of the tab behaves absurd. I tried following code:-

$('#tradeswith').on( 'shown.bs.tab', function () {
        $('.footable').trigger('footable_initialize');           

});

But the problem here is it works only for one table. For the rest of the table it doesn't work.

bor
  • 2,211
  • 4
  • 22
  • 37
  • A fiddle or plunk would help. Here's a plunk you can fork to get started: http://plnkr.co/edit/mgmZeLR7ud5x4g0RLBRv. – Jeff Oct 23 '14 at 15:07
  • Would it be possible you've tried use `$('.footable').trigger('footable_redraw');` – efkan Feb 14 '15 at 18:34

1 Answers1

2

I know this is an old post and much too late to solve the OP's problem but I arrived at this page with the same issue. Hopefully my answer will help the next person who arrives here.

The problem is that on non active tabs they have a CSS value of display: none which means the dimensions of the table is returned as 0 when Footable is initialized which causes problems.

The solution to this is to trigger a resize on selecting a new tab.

$('#tradeswith').on( 'shown.bs.tab', function () {
    $('.footable').trigger('footable_resize');
});

This will also work with other tab solutions, you just need to listen for the triggered event.

David Battersby
  • 266
  • 3
  • 13