I have a simple card interface that mimics http://ionicframework.com/docs/components/#card-showcase. At first the tabs displayed correctly with the icons on the left, but at some point in the last week they started displaying with the text vertically aligned to the top. I’ve played with the classes and it seems to be specific to “tabs-icon-left”. Font gets smaller and text offset to the top. Slightly confused what I’m doing wrong. Any help appreciated.
Do you mind posting a sample of tabs? A codepen even? This way we can isolate the issue
I appreciate the suggestion, and one I should have thought of. Unfortunately I can’t replicate it with a simple CodePen, which means it’s something my app (locally and built to device), even though it’s not much more complicated than a simple app. The nightly CSS is all I have included, same as the CodePen, but it’s only a problem on my machine.
I’ll keep digging. Sorry to not think first before posting.
Hmm thats strange. What version of ionic are you using? Or what device are you testing on? It could be a device specific issue or a ionic issue.
I’m using the nightly builds and I just realized what it is… although I don’t know how to fix it. I’m trying to build something like the “facebook styled card” as I linked to, but my card is displayed on a tabbed interface (starting from the default ionic “tabs” project). Whenever that “facebook” card is displayed within a tab, it seems that ALL tabs are vertically aligned to the top. When I do the same interface on a sample blank app without tabs it’s fine. I’m having problems getting a CodePen setup that will display it because so much is done in the directives to get the tabbed interface displayed and CodePen doesn’t seem to like it.
If you try copying the example I linked to from the “cards” examples and put it within a tabbed app, I’m assuming you’ll see the same thing with tab-icon-left.
Ahh I see now! Thanks for pointing that out! I’ll submit an issue for this. Good catch!
I noticed two things when trying to fix this:
On Chrome I can fix it if I add my own class in and override the vertical-align to be “bottom”. I didn’t look at it much because I assume this will get off with various sizings. It seems to take the height of the icon (32px) and then align the text to the bottom of that 32px, even though the row height is 47px.
On Safari, however, the vertical-align didn’t fix it. Instead I wrapped the text after the icon in a DIV and added this CSS which does move it. Again, it’s not precise because it will change based on font-size, etc.:
Sorry, had trouble pasting the HTML in the first reply.
<a class="tab-item disable-user-behavior" href="#"">
<i class="icon ion-ios7-email-outline"></i>
<div style="height:32px;line-height:48px;display:inline-block;">Share by Email</div>
</a>Hi,
I am having the same problem and I have also copied from the docs.
I’m wondering which version of ionic are you using in the docs 
.
Thanks,
Luís
The devs are aware of the issue and should get a fix out for it in the nightly builds soon.