Accordion hiding content

[ronin]

Hi,

For one of our websites we’ve divided different blog categories into different accordion tabs. On this page we have some long infographics and when you click on a different tab (for instance, VIC Melbourne) the page doesn’t extend to show the rest of the content. I’ve found that once I inspect element on the page it then fixes for some reason, but as visitors won’t do this, a different fix would be great.

Thanks

Attachments:

You must be logged in to view attached files.

[ronin]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

In that new page when I click in Melbourne it’s showing me the infographics.
https://www.dropbox.com/s/811dsy9oly2o773/Screenshot%202016-05-30%2009.16.28.png?dl=0

Do you have more content in that tab?
If so will need admin credentials to have a look.

-Rui

[ronin]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi @ronin

I can’t seem to replicate here – is it only a particular browser?

– Ed

[ronin]

Hi Ed,

I just checked and it seems to get cut off in Firefox and Chrome on different computers. It seems to be that on page load the content in the default/first tab doesn’t get cut off, but as soon as you click on one of the different tabs it gets cut off. It also seems to work fine on phones, just not on desktops.

There’s another page with the same layout, if you wanted to have a look there too:

http://www.propertyology.com.au/free-reports-articles-archive/property-market-outlooks/

[Swift Ideas – Ed]

Hi @ronin

Please can you try replacing the /js/functions.js and /js/functions.min.js with the ones in this zip – http://swiftideas.d.pr/1b1ML/1BIbXnis

Made a change that should hopefully sort the size out.

– Ed

[ronin]

Thanks for the help, however I added those two files to both the uplift and uplift child theme and still seem to have the issue.

[ronin]

Actually, I just checked in Safari and Firefox – they work, it’s just Chrome that’s still having an issue.

[ronin]

Hi Ed,

Just thought I’d let you know that until we figure out this problem I’ve added:

.tabbed-blog .spb_text_column, .tabbed-blog .spb_tabs .tab-content {
min-height: 1500px;
}

so that the content doesn’t appear cut off (just noting for further testing, this will need to be turned off).

[Swift Ideas – Ed]

Hmm.. I’m still unable to replicate in chrome. Would you be able to test yourself by editing /js/function.js line 4901:

}, 200);

Try increasing that number? Make sure you have performance mode disabled in the theme options.

– Ed

[ronin]

Hi Ed,

We only just got around to trying this out but we still are unable to make it work. I changed the 200 to 300, I’m not sure if I need to try some more numbers, I just don’t want to screw around too much as this site is live.

I just wanted to clarify, the page loads fine for the first tab, but once you click onto another tab (say NSW), the content gets cut off. I’ve still got the temporary code mentioned above in place so this doesn’t happen, but it isn’t ideal.

Thanks for the continued help.

[David Martin – Support]

Hi,

Yes I can replicate this on your site.

If you remove your min height CSS solution first.

Next inside Theme Options => Custom JS please add this:

jQuery('.tab-pane').each(function (index, element) {
    var tabHeight = jQuery(this).outerHeight();
    jQuery(this).css('min-height', tabHeight);
});

[ronin]

Thanks David,

I tried that, the Market Outlooks page seems to be working fine now, but the Market Trends page still gets cut off.

Thanks again for the help.

[Swift Ideas – Ed]

Hi @ronin,

I’ve commented out the css fix, and added some JS that looks to have sorted it. Please can you check your end?

– Ed