Tab-icon-left breaks with tab-bar

[mhartington]

Combining tab-bar with a card-based layout with tabs (similar to facebook) breaks the alignment of the card tab icon and title

More on the forum
http://forum.ionicframework.com/t/tab-icon-left-css-broken/2785/5

Codepen
http://codepen.io/mhartington/pen/cKsaD?editors=100

[ajoslin]

@adamdbradley Looked into this a bit, it's because the .tabs-icon-bottom .tab-item rule on a tabbar inherits forever, into the content of the tabbar. This is because of the recent change where we allowed the tabs-icon-bottom class on the parent of the .tabs element itself.

Possible fix from my look at it: Change it to .tabs-icon-bottom > .tabs .tab-item

[adamdbradley]

Fixed. Thanks @ajoslin for looking into it, that worked perfectly, thanks.

[akralj]

Hi
I'm sorry to say that this is still not resolved. Please have a look again at @mhartington codepen, which uses ionic-nightly:
http://codepen.io/mhartington/pen/cKsaD?editors=100
The last version of ionic.css where it is working is beta 1.
Problem also shows in the example in the docs:
http://ionicframework.com/docs/components/#icon-left-tabs
thank you for this great framework
andrej

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.