Tabbed views go responsive in Desktop when tabs extend beyond the display [#2837813]

Not sure if this is a bug or maybe I have configed something wrong>

I have a tabbed view with at least ten tabs. They are an archive for past meetings. I was getting normal tabs until the tabs ran on to a second line. This triggered the responsive menu in the desktop view of the site.

You can see it in action here

http://cc.rosenet.tv/past-meetings-events

I have checked it in FF, Chrome, and Opera, all on LInux. Same thing.

Is this a bug, or intended behavior? Or can I configure something a different way to avoid this behavior?

Comments

Comment #1

19 December 2016 at 19:16

RKopacz created an issue. See original summary.

Comment #2

RKopacz CreditAttribution: RKopacz commented 19 December 2016 at 19:19

Issue summary:

View changes

Comment #3

Jeff Burnz CreditAttribution: Jeff Burnz commented 20 December 2016 at 00:16

Category:	Bug report	» Support request
Priority:	Major	» Normal

It's intended behaviour - what did you want to happen instead? I can show you how to change it.

Comment #4

RKopacz CreditAttribution: RKopacz commented 20 December 2016 at 21:57

Hi Jeff, well, on a desktop, I'd like it to just wrap to a second line. The other plan was to make the fonts and the spacing in the tabs smaller so that they all appear on one line, but that would be only temporary, as the years will accumulate over time and I will end up with a wrap to the second line.

I would actually prefer to do a summary list or a glossary style in a block with a date limited to the year using a contextual filter, but that doesn't seem to be available in 8 right now, with the limited Date module integration into core.

Comment #5

Jeff Burnz CreditAttribution: Jeff Burnz commented 21 December 2016 at 00:25

Should have asked before, are you using SCSS/SASS?

Comment #6

RKopacz CreditAttribution: RKopacz commented 21 December 2016 at 06:02

Yes, SASS.

Comment #7

RKopacz CreditAttribution: RKopacz commented 29 December 2016 at 00:14

Just checking in on this question. If you could show me how to do this, I would be appreciative.

Happy Holidays!

Comment #8

Jeff Burnz CreditAttribution: Jeff Burnz commented 29 December 2016 at 04:13

I'll write a docs page for it, shortly, I am on holiday but also these past days I've had the flu, groan... not fun :/

Comment #9

Jeff Burnz CreditAttribution: Jeff Burnz commented 29 December 2016 at 04:36

In short...

~/styles/uikit/components/partials/component/_tabs.scss

In that file there are two important classes - .is-vertical and .is-horizontal, which set the "narrow" and "wide" styles respectively. These selectors are set with Javascript.

The "styles" are mixins, which are passed a selector - you can locate many types of "list styles" in the mixins directory: ~/styles/uikit/components/mixins

This is the default:

  // Set the narrow style.
  .is-vertical {
    @include list-style-button-group-vertical('ul.tabs--primary');
    @include list-style-seven-vertical('ul.tabs--secondary');
  }

  // Set the wide style.
  .is-horizontal {
    @include list-style-tab-group('ul.tabs--primary');
    @include list-style-seven-horizontal('ul.tabs--secondary');
  }

Additionally you can set fallback (no-js) styles if JS is not being used etc:

  // Use media queries when JS is unavailable.
  @media #{$mobile} {
    .no-js & {
      @include list-style-button-group-vertical('ul.tabs--primary');
      @include list-style-seven-vertical('ul.tabs--secondary');
    }
  }

  @media #{$tablet-landscape} {
    .no-js & {
      @include list-style-tab-group('ul.tabs--primary');
      @include list-style-seven-horizontal('ul.tabs--secondary');
    }
  }

What you could do is something like this, since you want them to wrap, buttons might be an appropriate style for both vertical and horizontal states:

  .is-vertical,
  .is-horizontal {
    @include list-style-buttons('ul.tabs--primary');
    @include list-style-seven-horizontal('ul.tabs--secondary');
  }

If you're using a later version of the theme these layouts will use Flexbox (earlier RC2 will use floats), if they're using flexbox you'll need to add a line of code to .tabs (in the same file):

.tabs {
  flex-wrap: wrap;
}

Of course by all means hack the mixins to give yourself unique styles, the theme is meant to be hacked, nothing is sacred :)

Comment #10

RKopacz CreditAttribution: RKopacz commented 31 December 2016 at 17:13

Jeff, Thanks so very much for this. So sorry to hear about the Flu! Been there, done that, greatly appreciate your taking the time, particularly under the circumstances.

Happy holiday season and Happy New Year!

Comment #11

RKopacz CreditAttribution: RKopacz commented 2 January 2017 at 15:11

Jeff, Just for general reference, I am putting in here what I did, so if others have a similar preference they can apply it.

in the _tabs.scss file, I put the following code inside the .is_vertical class:

    .path-past-meetings-events & {
        @include list-style-tab-group('ul.tabs--primary');
        @include list-style-seven-horizontal('ul.tabs--secondary');
    }

Essentially just applying the horizontal styles in that instance of the .is_vertical class.

Perhaps not the most programmatically elegant solution, but it worked :-)

Thanks again for your help and Happy New Year!