Foundation-sites: Hidden .tabs-panel with equalizer

[JTallis]

Equalizer sets all heights to 0 when it's in a .tabs-panel that is hidden.

I'm certain that this doesn't happen in F5 as it was working fine until upgrading to F6 and changing the HTML so that it matches that of F6.

Here is an: example

Click the Equalizer tab and you will see that all heights will be 0 until you resize the browser and only then will it re-equalize and be the right heights.

Is this a bug? Does anyone have any suggestions on how to fix this?

[designerno1]

quick and dirty fix you can try something like this

$('[data-tabs]').on('change.zf.tabs', function(e, $target) {
  var $tabsEq = $('[data-tabs-content=' + $target.parent('[data-tabs]').attr('id') + '] > .tabs-panel:eq(' + $target.index() + ') > [data-equalizer]');
  if ($tabsEq.length) {
    $tabsEq.data('zfPlugin')._reflow();
  };
});

[andycochran]

Just works if you add this:

.tabs-panel {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
}

.tabs-panel.is-active {
  height: auto;
  padding: 1rem;
}

Maybe display:none is the wrong way to go for tabs?

[madhanan]

Can someone solve this ?? without the enduser doing modification. Foundation 6 is supposed to work fine out of the box..

[JTallis]

I had added a quick fix to the one and only page where I use both components together. designerno1's fix is likely to be more efficient as it only targets the selected content element's children to equalize.

This was my fix:

$("[data-tabs]").on("change.zf.tabs", function() {
    Foundation.reInit('equalizer');
});

Someone should definitely come up with a permanent fix for this, if one hasn't already been added. I haven't upgraded my Foundation to the latest yet. I'm still on 6.2.1.

[andycochran]

@zurb/yetinauts Does anyone have concerns with me switching Tabs to a method other than display:none? A fix like I mentioned above would solve the height issues with nested components.

[t22james]

@andycochran I specifically came to git now to suggest this, so glad you are already considering it.

This saves SO MUCH head-aching work when you have plugin content inside tabs. E.g. sliders, charts, essentially any js plugin will be screwing out inside the tabs which are display:none, because they lose layout. By using the method you describe above, plugin content in hidden tabs will still render correctly (or atleast have a much better chance).

The only downside is hard coding any padding values, but then given tab-panels don't have padding by default, and thus user is being encouraged to use a padded element inside instead, I think that is still a safe move.

[christianmagill]

@andycochran Wouldn't setting the height of the inactive panel defeat the purpose of equalizing them? It would work if the visible panel was the taller, but not if it was shorter than the hidden panel.

[andycochran]

What about instead of changing the display (how it works now) or height (as I suggest above), we change the position:[static/absolute] and left:-9999rem?

[christianmagill]

That was actually my next thought. But position relative would be better so the content would still be sized according to container.

[christianmagill]

Wait, I guess that would stack them.

[andycochran]

@christianmagill Actually, the height trick I described should work. This is about equalizer breaking on content inside tab panels, not on the panels themselves.

[christianmagill]

My mistake, your solution sounds good to me.

[andycochran]

😞 Unfortunately, the height method doesn't work with data-match-height="true", which sets inline heights.

[coreysyms]

9126 will fix this as it qualifies as a mutation event.

[coreysyms]

I actually show how this issue is fixed in my example on that PR

[andycochran]

Woot! Awesome, @coreysyms.

@JTallis, I'm going to close this issue, as it'll be fixed in 6.3. Please reopen if you're still having trouble after the next release.

[rui-castro]

@andycochran this issue still happens with version 6.4.3.
Using Foundation.reInit('equalizer'); after showing the hidden elements fixes it.