Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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.
Comment | File | Size | Author |
---|---|---|---|
#1 | vertical_tabs-mobile-before.png | 68.99 KB | Wim Leers |
#1 | vertical_tabs-mobile-after.png | 78.74 KB | Wim Leers |
core-js-verticaltabs-small.patch | 3.96 KB | nod_ | |
Comments
Comment #1
Wim LeersI 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.
Comment #2
webchickWow, that does indeed look much nicer. :)
Huh. I had no idea that was valid HTML. Go HTML5, I guess. :)
Committed and pushed to 8.x. Thanks!
Comment #3
webchickComment #4
Wim LeersSadly, this patch had an interesting side-effect that we all forgot to consider.
filter.admin.js
calledtabHide()
on the vertical tab containing the filter settings for any filter that is disabled. (AndtabShow()
when it gets enabled.)Because the Vertical Tabs JS is no longer run at all on mobile devices, this also *breaks* on mobile devices.
Comment #5
nod_It was already the case before. The killswitch for mobile hasn't been introduced by this patch.
Comment #6
Wim LeersIndeed, 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.