Eric Mitjans Eric Mitjans - 1 month ago 6x
CSS Question

Tablesaw not getting triggered inside Bootstrap Carousel

I'm using the Tablesaw plugin to get responsive tables.

At some point I need to include different tables inside different items/slides of a Bootstrap Carousel.

On load, the table on the active Item of the Carousel will display correctly (Tablesaw is initiated properly), but once I move to the next slide/item, the tables in there won't be properly displayed (Tablesaw not initiated).

Tablesaw includes an extra JS file to initiate upon load:

$( function(){
$( document ).trigger( "enhance.tablesaw" );

This seems to work for the first slide/item but not for the rest.

Any clue on why this might be happening?

I've created a Plunker to illustrate the issue.


The problem is in the Tablesaw intialization. Tablesaw needs to now during initialization (which is done in the tablesaw-init.js) the size of the element. You have two tablesaw elements placed inside the bootstrap Carousel, while one is active and the other is not. When you look at the Carousel css, you can see that the disaplay property of the Carousel item which is not currently active is set to none. Elements which are not displayed have width and height set to 0.

So the solution could be changing the code inside the file tablesaw-init.js to this:

;(function($) {
      // Show all carousel items before Tablesaw intialization
      $(".carousel-inner > .item").css("display", "block");
      // Initialize the Tablesaw
      $( document ).trigger( "enhance.tablesaw" );
      // Remove the style added before initialization
      $(".carousel-inner > .item").removeAttr("style");

After this change there is no need to handle the slid event.

Here is you original code sample with the mentioned change, so you can see it is working