Tab Group Issue

[Gillian]

A problem has arisen with pages where I use tab group shortcode.

I set up several pages with tab groups over a month ago – this is one example.  I tested them at the time, and tabs that flowed onto a second (or more) row on smaller screen (mobile) sizes were still clickable – now they are not.

I discovered this problem today when I set up a new page with a larger number of tabs which flow onto more than one line on my desktop machine – only the top row of tabs is clickable.  When I look at the page on a mobile, only the first one or two tabs (whatever fits onn the top line) is clickable.

Have I done something stupid in the meantime to cause this behaviour, or is it a consequence of recent updates to Weaver Xtreme and/or the Theme Support and/or Plus plugins?

[scrambler]

Right now the div that contains the tab (.wvr-tabls-nav) is generated wurh afixed height of 32px (one row) as a result, the second row is outside the div container and overlaps with the content container (this is why you had to put several <br/> to lower the content.

I believe this is done on purpose so the border around the content run below row one and row two is inside the  box.

Unfortunately the z-index is on the tabs but not their container so the one inside the content box are under it

If keeping with that design then add the rule below to set the proper z-index to the tab container

.wvr-tabs-nav {position:relative;z-index:3;}

@weaver, this probably needs to go in permanently

[Gillian]

Many thanks @scrambler – all fixed, and the tabs all work properly on mobile now as well 🙂

For my next problem with tab groups, the minimum height parameter doesn’t work (it didn’t work a month ago either, when I first started using tab groups).

In the help, the syntax for the minimum height parameter is described as both “page_min_height” and “pane_min_height” (so there’s a typo somewhere) but I have tried both variants and neither works 🙁

[Weaver]

Added to Weaver Xtreme Theme Support and Weaver Themes Shortcode Compatibility plugins for next release.

[scrambler]

I tested and the correct working syntax is

pane_min_height=200px

 

[Gillian]

Thanks @weaver 🙂

You are quite right @scrambler – on checking my syntax again for the umpteenth time I found that silly me had a colon instead of an equals sign. I’m too used to using colons, I guess 🙂

@weaver – there is a typo in the help document:
[tab_group border_color=black page_min_height=200px]
should be
[tab_group border_color=black pane_min_height=200px]

Also, a nice-to-have additional parameter would be the ability to set the font color.  There are parameters to set the background color for both “tab” and “selected_tab” but, when using dark colors for these, the default black font color is no longer readable.  I know it is easy enough to change with CSS but being able to change the color via a shortcode parameter would be great 🙂

[Weaver]

@Gillian – I do that, too, all the time. I wish WP shortcodes would recognize : as = .

[Kieffer]

In normal view the tabs work fine, but in responsive phone-view some of the tabs come below the other ones and are not clickable.

Is there an option to solve this problem?

Thanks in advance

John

[scrambler]

Please open a separate thread with a link to your site and specific details about the issue

[Gillian]

@Kieffer

The CSS that @scrambler posted earlier in this thread should fix the issue for you:

.wvr-tabs-nav {position:relative;z-index:3;}

Put the rule in Main Options > Fonts and Custom >Custom CSS Rules.

@weaver

You posted in this thread in February that the z-index issue scrambler identified would be Added to Weaver Xtreme Theme Support and Weaver Themes Shortcode Compatibility plugins for next release.

However, I still had the above CSS rule in place so I removed it temporarily as a test just now, and found that without the rule a second row of tabs again became unclickable, so it appears there is a problem with the bug fix you did a few months ago.

[Kieffer]

Thanks @Gillian your solution did the job.

@scrambler unfortunately the website is not on the web yet.

Thanks all.

[scrambler]

I believe the fix needs to be in the Weaver Xtreme Theme support, and no new updates have been released for it since then.

There is another fix for the tab shortcode that needs to go in to improve the border look and that is also still missing.

[Weaver]

I think the changes are actually in 1.1, but I failed to re-compile the style file for the minimized version.

[Kieffer]

With other shortcode plugins the tabs do alter from horizontal tabs in a vertical accordeon in phone view. Is this an option for the next release of Weaver?

Regards

John

[Weaver]

No.

[Kieffer]

Is there a reason for not doing that. I think it looks much better.

[Author]

Posts