IrokDaYellup IrokDaYellup - 6 months ago 51
Javascript Question

Making a jQuery Isotope layout initialize inside a Bootstrap Tab

I have a bootstrap tab control with 4 tabs. My Isotope code is inside the 3rd tab. But when I navigate to that tab, the layout is not engaged (All the images are on their own line, not in a nice tiled layout). If I resize the page it will reorganize into the proper layout.

I have recreated the issue here.

<div class="tab-pane" id="messages">
....isotope code here

How do you make the Isotope engage so that when I navigate to the tab, it is already formatted and displaying correctly?


You can use the event :

$('a[data-toggle="tab"]').on('', function (e) {

This code will trigger layout for all tabs, so you can detect the tab with, if == your tab link to your isotope grid, then trigger layout. Hope it makes sense...