moneyadviceservice/dough

[WIP] TabSelector - tab items disappearing at smaller device widths

Closed this issue · 7 comments

ourmaninamsterdam commented

Wide viewports
In wider views the tab items are displayed correctly.

image

Narrow viewports
But in narrower viewports, the tab items disappear

https://www.moneyadviceservice.org.uk/en/tools/pension-calculator

  • Firefox Latest 33.1
  • Chrome Desktop 40.0.2214.94
  • Chrome Android 40.0.2214.109
  • Safari on iOS 8.1
  • Safari on OSX 8.0.3 (10600.3.18)

Closed
image

Open
image

Can be seen on https://www.moneyadviceservice.org.uk/en/styleguide/components/common and https://www.moneyadviceservice.org.uk/en/tools/pension-calculator

ourmaninamsterdam commented

It appears to be this line causing the issue.

Guntrisoft commented

is this on a particular browser? - i'm not seeing this issue on chrome/mac on http://www.madewithdough.org.uk/

Guntrisoft commented

I can see it now on the stylesheet page, wondering what's different between that and the madewithdough site?

ourmaninamsterdam commented

Sorry, should have posted the browsers. Have updated the info above.

Guntrisoft commented

the madewithdough site has this line:

.tab-selector__trigger-container .tab-selector__trigger {
font-size: 1rem;
line-height: 1.5rem;
}

ourmaninamsterdam commented

Good spot. If you disable the font-size: 1rem on your snippet, then the font-size: 0; further up the tree on .tab-selector__triggers-inner is inherited.

After digging a little further with @Guntrisoft, it's the removal of this line that triggered the issue.

We need to investigate what is the best course of action, whether to stick with my fix, or look at actually setting the font-size on the trigger, as @extend %type was doing previously. I shall investigate further.