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

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Bojhan’s picture

Issue summary: View changes
cosmicdreams’s picture

it 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:

.tabs > li {
  display: block;
}

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?

Manjit.Singh’s picture

I think

.tabs > li {
  display: block;
}

can solve our problem. but need to check it in other places also.

Manjit.Singh’s picture

Status: Active » Needs review
LewisNyman’s picture

Status: Needs review » Needs work
+++ b/core/modules/system/css/system.theme.css
@@ -414,7 +414,7 @@ ul.tabs {
 .tabs > li {
-  display: inline-block;
+  display: block;

We 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

vinmassaro’s picture

Status: Needs work » Needs review
FileSize
732 bytes

Here is a patch with this change to the Seven theme instead, as mentioned in #5.

LewisNyman’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
FileSize
296.54 KB

Ok great, this seems to work and doesn't cause any regressions. Thanks!

LewisNyman’s picture

Issue summary: View changes
Bojhan’s picture

All of the color differences here is a little crazy, we should probably tackle that later. Including all the different paddings.

Manjit.Singh’s picture

Fantastic !! looks good now :)

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Can 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!

  • alexpott committed 0270b91 on 8.0.x
    Issue #2486413 by Manjit.Singh, vinmassaro, LewisNyman: Seven's primary...

Status: Fixed » Closed (fixed)

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