Tabs don't blend with header


#1

The tabs don’t seem to blend with the header.

I also have a problem with the reset button in the header. It doesn’t get aligned to the right of the title in the header


#2

for the reset button use this <ion-nav-buttons side="right">
for the other thing im not sure what you want to archive?!


#3

If you see the ionic docs for tabs, there is a class caled “has-tabs-tops” that if you add will blend the header and the tabs together like in android.

And thanks for helping with the reset button. It worked. yay.!!


#4

ah found the problem you have to add this class to your header not the tabs-bar!
see here: http://codepen.io/Auro/pen/hpwDq


#5

It doesn’t seem to work. If you take a look at the screenshot I would have used angular directives and not div with classes “tabs” like in the codepen link


#6

hm changed to ion-tabs and ion-tab and it does work: http://codepen.io/Auro/pen/hpwDq
what did you do?

remember has-tabs-top has to be on Header like

<ion-nav-bar class="nav-title-slide-ios7 bar-positive has-tabs-top">

#7

ok so you have added the tabs-top thing only in your home template. That’s what is making the difference. or should i include the tabs code in all templates.?


#8

yes in this codepen i added it only on home template.
coze it does not work when i put both in tabs.html template.

if you need it every where i would change code using html markup not angular.

i hope i could help.