on small screens we bypass all the vertical tabs things but the style is still applied and looks broken.

Patch fixes the issue by relying on a data attribute and only adding the class when JS is on and the screen is big enough.

#1 vertical_tabs-mobile-before.png68.99 KBWim Leers
#1 vertical_tabs-mobile-after.png78.74 KBWim Leers
core-js-verticaltabs-small.patch3.96 KBnod_
PASSED: [[SimpleTest]]: [MySQL] 59,167 pass(es). View
Members fund testing for the Drupal project. Drupal Association Learn more


Wim Leers’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: +JavaScript, +mobile
78.74 KB
68.99 KB

I did manual testing for this. Not only do vertical tabs look broken on mobile devices, they actually break the styling of everything else on the page as well!

Everything that looked strange at first to me in this patch turned out to be correct and essential.

webchick’s picture

Wow, that does indeed look much nicer. :)

+++ b/core/includes/form.inc
@@ -4067,7 +4067,7 @@ function form_pre_render_vertical_tabs($element) {
-  return '<div class="vertical-tabs-panes">' . $element['#children'] . '</div>';
+  return '<div data-vertical-tabs-panes>' . $element['#children'] . '</div>';

Huh. I had no idea that was valid HTML. Go HTML5, I guess. :)

Committed and pushed to 8.x. Thanks!

webchick’s picture

Status: Reviewed & tested by the community » Fixed
Wim Leers’s picture

Status: Fixed » Active

Sadly, this patch had an interesting side-effect that we all forgot to consider.

filter.admin.js called tabHide() on the vertical tab containing the filter settings for any filter that is disabled. (And tabShow() when it gets enabled.)

Because the Vertical Tabs JS is no longer run at all on mobile devices, this also *breaks* on mobile devices.

nod_’s picture

It was already the case before. The killswitch for mobile hasn't been introduced by this patch.

Wim Leers’s picture

Status: Active » Fixed

Indeed, I just realized that too. Opened a new issue to fix it, includes a patch: #2108955: Settings for disabled filters are not hidden in narrow viewports, because Vertical Tabs are disabled in narrow viewports.

Sorry for inappropriately reopening this issue.

Automatically closed -- issue fixed for 2 weeks with no activity.