bug: tabs-top tabs-striped titles misalign when active

[mikejpeters]

Type: bug

Platform: all

http://codepen.io/anon/pen/bNOaOY

When a tabs-top tabs-striped tab is activated, the title is moved down by a couple pixels and does not line up with the title of the other, inactive, tabs.

I believe the problem was introduced in RC0 and only applies to tabs with titles instead of icons. (Tab icons are display: block and have a negative margin applied when the tab is active.)

https://github.com/driftyco/ionic/blob/bf40b222be85c8dba6e9531044505976fabc8d78/scss/_tabs.scss#L310

I think that similar styles need to be added for the .tab-title element, i.e. make it display: block, and update the rule on line 310 to:

> .tab-title, > .badge, > i {
  margin-top: -$tabs-striped-border-width + 1px;
}

[Fayozjon]

mikejpeters

http://nmr.co.ke/sbyt

20.03.2015, 21:32, "mikejpeters" notifications@github.com:Type: bug

Platform: all

When a tabs-top tabs-striped tab is activated, the title is moved down by a couple pixels and does not line up with the title of the other, inactive, tabs.

I believe the problem was introduced in RC0 and only applies to tabs with titles instead of icons. (Tab icons are display: block and have a negative margin applied when the tab is active.)

I think that similar styles need to be added for the .tab-title element, i.e. make it display: block, and update the rule on line 310 to:

.tab-title, > .badge, > i {
margin-top: -$tabs-striped-border-width + 1px;
}

—Reply to this email directly or .

[perrygovier]

@mhartington, can you run this fix through snapshot? make sure it doesn't break other configurations? Retina/non-retina, specific background/color classes, plain divs/directive

[mhartington]

So the changes your proposing @mikejpeters ended up causing issues for the tabs-icon-left and tabs-icon-top classes. Will look into a better fix