Any way to use this with tabbed content?

[suprpp]

Hi, great plugin, thank you. I'd like to use it with content that is split into a couple of tabs. The content in visible tabs is fine, but the content in hidden tabs (display:none) is set to height:0px. Is there any way around this?

[liabru]

I think the issue is you normally can't get correct height of an element if the element is inside another element that is "display:none".

I think you'll either have to apply matchHeight before you apply your tab script,
or make the tab panel display:block then apply matchHeight, then after make the tab panel display:none again immediately after.

If this doesn't help, could you provide a jsFiddle?

Cheers

[liabru]

I'm closing this for now, but I'll reopen it if you reply with more info regarding an issue, cheers.

[andyg2]

I have a similar problem
I have tabs in a boorstrap modal window.
I've tried this which doesn't work

$("#ez-layer-settings-modal").css({"display":"block"});
$("#ez-layout-themes-tab").css({"display":"block"});
$(".ez-theme-preview").matchHeight(true);
$("#ez-layout-themes-tab").css({"display":"auto"});
$("#ez-layer-settings-modal").css({"display":"none"});

But this does work however it leaves the modal and tab displaying :(

$("#ez-layer-settings-modal").css({"display":"block"});
$("#ez-layout-themes-tab").css({"display":"block"});
$(".ez-theme-preview").matchHeight(true);

I'm stumped

[liabru]

@andyg2 is it not possible to apply matchHeight before you apply your tab script?

[andyg2]

If I apply matchHeight before, all heights are set to 0px
I've managed to work around it with:

$(document).on("click", 'a[data-toggle="tab"]', function (e) {
    if(e.target.text=="tab text"){
        $(".selector").matchHeight(true);
    }
});

[pinin]

If someone helps - Combine the plugin jquery.actual to determine the height of hidden element
https://github.com/dreamerslab/jquery.actual

[liabru]

@pinin thanks, this plugin already integrates a similar technique

@andyg2 @suprpp

From #12:

I've just pushed a change that now automatically handles hidden elements like those in tabs.
I tested it working with Bootstrap tabs.

If you're still having this issue, would you mind giving the latest master version a try?