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.
Problem/Motivation
On narrow screens there is some spacing between the collapsed tabs that shouldn't be there:
Proposed resolution
Remove the spacing
Remaining tasks
User interface changes
Minor spacing changes
API changes
None
Comment | File | Size | Author |
---|---|---|---|
#7 | Screen Shot 2015-05-11 at 14.30.46.jpg | 296.54 KB | LewisNyman |
#6 | seven_s_primary_tabs-2486413-6.patch | 732 bytes | vinmassaro |
Screen Shot 2015-05-10 at 13.32.33.jpg | 387.52 KB | LewisNyman |
Comments
Comment #1
Bojhan CreditAttribution: Bojhan as a volunteer commentedComment #2
cosmicdreams CreditAttribution: cosmicdreams as a volunteer commentedit appears that the
display:inline-block
is at fault for this extra spacing. It also looks like the containing element has the class is-horizontal-enabled which gets different styles than is-horizontal.I'm a bit confused about the intent of these classes, but it appears that the intent of these styles. We have both is-horizonal and is-horizontal-enabled. And is-horizontal-enabled doesn't seem to be addressed by any styles. Or any other javascript. So I don't know why it exists other than it ISN'T is-horizontal and therefor doesn't trigger any of its styles on the children elements.
If I include the suggested style change:
Adding this to the tabs.css overrides the styles that are established in system.theme.css. This small change elimates the spacing.
In addition, it appears that one can reduce the width of a page to get the make the page enact the javascript that triggers the collapsible tabs. But if you expand the page back to full width the page will not toggle the class out. Therefore this functionality is one way. Should we open a new ticket for that?
Comment #3
Manjit.SinghI think
can solve our problem. but need to check it in other places also.
Comment #4
Manjit.SinghComment #5
LewisNyman CreditAttribution: LewisNyman at Wunder commentedWe can't make this change in system.theme.css, because it's going to affect every theme, can we make this change in Seven's tabs.css instead? Cheers
Comment #6
vinmassaro CreditAttribution: vinmassaro commentedHere is a patch with this change to the Seven theme instead, as mentioned in #5.
Comment #7
LewisNyman CreditAttribution: LewisNyman at Wunder commentedOk great, this seems to work and doesn't cause any regressions. Thanks!
Comment #8
LewisNyman CreditAttribution: LewisNyman at Wunder commentedComment #9
Bojhan CreditAttribution: Bojhan as a volunteer commentedAll of the color differences here is a little crazy, we should probably tackle that later. Including all the different paddings.
Comment #10
Manjit.SinghFantastic !! looks good now :)
Comment #11
alexpottCan we get a followup for #9 - thanks.
This issue is a normal bug fix, and doesn't include any disruptive changes, so it is allowed per https://www.drupal.org/core/beta-changes. Committed 0270b91 and pushed to 8.0.x. Thanks!