0

I'm using isotope to align a set of divs that are placed into a bootstrap tab. The tab is filled dynamically through a backbone view.

Here is the code before the view fills the tab:

  <div class="tab-pane" id="program">
  </div>

no divs to align then. After the view has filled the tab, the element will be something like this:

<div class="tab-pane" id="program">
    <div class="badge">
      aleatory content here
    </div>
    <div class="badge">
      aleatory content here
    </div>
    <div class="badge">
      aleatory content here
    </div>
    ...
</div>

the tab will be rendered, but another tab will be visible by default. So, to view the content of #program I will have to click on the proper tab that opens my div#program.

So, if I run this piece of code after rendering the div#program:

this.$('#program div.muse-events').isotope({
      itemSelector  : 'div.badge'
      ,layoutMode   : 'fitRows'
});

what I get is an EMPTY TAB. I personally think it's because some reference is missing and isotope only removes the elements in the div#program without handling the div#badge.

If I want to get what I want, I have to call the piece of code above only when the tab is clicked (and hence the div#program is showed and not hidden).

So, two questions:

  1. why is that? Is maybe the tab removed from the DOM until someone explicitly requests it?
  2. What's the best practice in this case? Is calling that command ok when I click the proper tab? Could I run it in some way when I call my View.render? It could be semantically much more correct

Thanks

Bertuz
  • 2,390
  • 3
  • 25
  • 50
  • 1
    Does isotope need to know the sizes or positions of things? Sounds like it probably does. That information usually won't be available until the `
    ` in question has been displayed so perhaps isotope is getting a bunch of zeros and leaving everything with zero dimensions. Use your DOM inspector to see if the `.badge` elements are there, what their dimensions are, and what their positions are.
     – mu is too short Oct 02 '13 at 03:30
  • you were right: the width is well defined (thanks to the `.span4`), but the `height` is set to `auto` as long as you open the tab. I'm wondering if there is a workaround to make it temporarily visible so as to call `isotope` properly. – Bertuz Oct 02 '13 at 15:31
  • 1
    I've had similar issues with a Google Map inside a tab (difference tab library but the same underlying problem). I used jQuery's [`one`](http://api.jquery.com/one/) to bind a function to the tabs so that the map would be attached the first time the tab was opened. A `setTimeout(function() { ... }, 0)` hack might also be an option. – mu is too short Oct 02 '13 at 16:43
  • I've had exactly the same problem with GMap inside a Modal and I fixed it by putting a new item in the `events hash`: `el: "#modalElemID"` `events: { ... "shown": "_modalShownFunc"}` but in this case I didn't hace a separate view for the tab (it could have been a solution though!). About your `one` solution: that event could not be fired and in case of single page application we could face some memory leak issues, right? I would put that in the `events` hash so that I can deference it easily. What do you think? – Bertuz Oct 03 '13 at 16:19
  • In this case I've added in my `events` View hash this row: `"click li.tab-with-badges" : "_funcWithIsotopeToCall"`. With a boolean you can perform this just once – Bertuz Oct 03 '13 at 16:25
  • 1
    There's also [`_.once`](http://underscorejs.org/#once) so you can 'click whatever': _(function() { ... }).once()` or [`Events#once`](http://backbonejs.org/#Events-once) if that sort of set up makes more sense than going through the view's `events`. – mu is too short Oct 03 '13 at 17:13

0 Answers0