There is logic in /core/themes/seven/js/nav-tabs.js that if the height of a set of tabs is taller the first set of tabs, (primary tabs), to switch to a vertical or mobile view. This is great on mobile and tablet, but doesn't work well on large desktop, as you end up with very long full-width vertical tabs that push everything way below the fold. For example if you have many display modes, it pushes everything below the fold:
In my case, when the secondary tabs are set to verity on a macbook retina on /admin/structure/types/manage/article/display, the ul.tabs.secondary these secondary tabs are 1375 pixels in height! (Labels changed to preserve anonymity).
I don't believe any special is required to recreate this. Just create a bunch of view modes.
Proposed Solution:
Update the logic to exclude the vertical tabs after a certain width.
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
oknateComment #3
oknateComment #4
oknateComment #5
oknateComment #6
oknateUpdated the logic.
Comment #7
oknateHere's an updated version of patch #6 that adds flexbox to fix a spacing issue. I'm not a front-end specialist, so I'd love someone who is to see what they can do about making the tabs look better in these situations. Because I'm not setting random text, it looks more even that it normally does.
Comment #8
oknateComment #9
oknateHere's a screenshot with flexbox added (patch #7).
Comment #10
oknateComment #11
oknateComment #13
oknateNeeds a reroll.
Comment #14
yogeshmpawarComment #15
yogeshmpawarRe-rolled the patch against 8.8.x branch.
Comment #19
sulfikar_s commentedI've re-rolled the patch please review.
Comment #20
sulfikar_s commentedFixed the custom commands. Please review.
Comment #21
sulfikar_s commentedCorrected the flex-wrap position. Fixed the custom commands.
Also attaching the interdiff. Please review.
Comment #22
sulfikar_s commentedCorrected the last custom commands issue. Please review.
Comment #23
tanmaykadam commentedComment #24
tanmaykadam commentedVerified and tested the patch in #22.
Patch applied successfully and looks good to me.
Testing Steps:
Add view modes
# Goto: /admin/structure/types/manage/page/display
Looks good to me.
Can be a move to RTBC
Please refer attached screenshots for before and after patch.
Comment #25
tanmaykadam commentedComment #30
rakhi soni commentedAttached re-rolled against branch 9.5x,,
Kindly review patch.
Comment #31
sonam.chaturvedi commentedVerified and tested patch#22 on 9.5.x-dev. No need of re-rolled patch#30 as patch#22 works fine on 9.5.x-dev.
Test Steps:
1. Enable Seven theme
2. Add display > view modes for content
3. Goto: /admin/structure/types/manage/page/display
Test result:
Tabs remain horizontal on desktop beyond a certain width.
Before patch:
After patch:
RTBC+1
Comment #32
bnjmnmThe reroll from @Rakhi Soni was not necessary (and added problems) and credit will not be granted. See my comment at #3088239: Revisions on relations are not loaded correctly resulting in wrong data in includes for how to determine if a reroll is needed.
Comment #33
longwaveThe Seven theme has been removed from Drupal 10 core. I confirmed that this issue only affects Seven and no other themes included with Drupal core, so I am moving this to the contributed Seven project.
Comment #34
avpadernoComment #37
avpadernoComment #38
avpadernoseven-3019851/3019851- is 66 commits behind the target branch and it has conflicts. It is better to start again with seven-3019851/3019851-Tabs-should-remain-horizontal.
Comment #41
avpadernoComment #43
avpadernoComment #44
avpadernoComment #45
avpadernoComment #47
avpadernoComment #49
avpadernoComment #52
kmitch commentedHi,
I just installed v2.0.0-beta2 (in preparation for Drupal 11), and discovered that part of the fix for this issue seems to be causing a regression, at least for paragraph tabs that are designated as hidden with class "
paragraph-tabs-hide".In the "
tabs.css" file, the "display: flex" rule for the selector ".is-horizontal .tabs" (lines 215-216 in the v2.0.0-beta2 version oftabs.css), is overriding the "display: none" rule for the selector ".paragraphs-tabs-wrapper .paragraphs-tabs-hide" from the paragraphs module's admin CSS stylesheet.I have attached two screenshots that show the effect of the "display: flex" rule addition on a basic page's editing screen. In the "
hidden-tabs-visible" screenshot (using v2.0.0-beta2 version of Seven), the "Content" and "Behavior" tabs are visible below the "Body" legend (the screenshot also shows the inspector highlighting the exact element that is affected and the rule that created a flex display). The other screenshot ("hidden-tabs-not-visible") shows the correct display of the "Body" legend without the two "paragraph-tabs-hide" elements visible.It appears that the fix for this issue was never implemented for Seven v1.0.0, which presumably explains why this was never reported before (or else our configuration is unique). I'm not entirely certain the best way to address this, though, aside from perhaps amending the selector to become "
.is-horizontal .tabs:not(.paragraphs-tabs-hide)"? This approach would need to be adjusted, though, if other admin elements also used a "*-hide" class name to suppress display. (Another approach would be to get the paragraphs maintainer to add an "!important" declaration to theparagraph-tabs-hiderule, but I suspect this issue is more theme- than module-dependent.Sorry to raise this bug/problem long after this issue was closed!
-- Ken
Comment #53
avpadernoComment #54
macdev_drupal commentedThanks @Kmitch for documenting this. We can confirm a related regression on Drupal 11.3.3 with Seven 2.0.0-beta4 (admin theme: custom Subseven based on Seven).
Observed behavior:
- At viewport width >= 1182px, local tasks behave as expected.
- At viewport width <= 1181px, behavior breaks:
- either all tabs are shown (no "..." collapse trigger), or
- with local workaround patches, only a single tab is visible and the trigger area renders incorrectly.
This seems consistent with the flex-based horizontal tabs logic introduced as part of #3019851 and its interaction with hidden tab elements (e.g. `paragraphs-tabs-hide`).
In our setup, `.is-horizontal .tabs { display: flex; }` conflicts with hidden-tab expectations from Paragraphs UI styles, so hidden tabs can become visible and collapse logic becomes unstable.
So even though #3019851 is closed and merged in 2.x, there appears to be a remaining regression/edge case in D11-era admin layouts (possibly theme/CSS interaction dependent).
If helpful, we can provide:
- exact browser + zoom
- minimal repro route (/admin/content and node edit forms with paragraphs)
- screenshots for 1182px vs 1181px