Sub Header not showing on Android with Tabs

#1

Great job
Just one concern.

Sub-header is not working in android for tabs. It gets hidden under tabs because now for android tabs only show up at the top.

So I am wondering how do I show the subheader which otherwise shows perfectly ok for iOS .

Putting class=has-subheader in ionic-content also doesn’t work.
Could be a bug I suppose :frowning:

Please advise.

1 Like
Ion-header inside ion-tab not working
#2

hi,

check this codepan

1 Like
#3

Your tabs don’t have sub-headers.
My view which shows up in one of the tabs has a subheader bar.

#4

Here you go.

3 Likes
#5

@mhartington… Mine is a hybrid app which works on iOS and Android both.
Now with your solution it doesn’t work with iOS.

It leaves a gap in between the header and the subheader in iOS.
The fix should be something with a conditional logic for iOS and Android.

I am not a CSS expert, but from what I can gather the spacing should vary depending on the platform.
Please help.

P.S:- An example is the Footer, which automatically adjusts well between iOS and Android.
It is in fact my temporary savior as meanwhile I have moved my sub-headers to footer.

Ion-tabs on TOP of the screen in Android?
#6

Then you can do this.

.platform-android .bar-subheader.has-tabs-top{
  top:93px !important;
}

.platform-android .has-subheader.has-tabs-top{
  top:137px;
}

So this way, the css will only be applied on android. During the build process, we modify the index.html to include a class of platform-ios or platform-android.

3 Likes
#7

@mhartington
Ideally your solution should work only when I have tabs and not shift it down when I am dealing with non-tabs screen.

But its strange that it is still shifting it down even when there is no tab.
So, can you please recheck the above pasted code.

Secondly, I think this should be fixed in the ionic framework itself as it is a bug, and not solved locally in the developers side. Please confirm if this is the correct understanding.

I hope that it will be a part of the next build.

Please help!

1 Like
#8

Hmm, not sure I follow, can you please provide an example of this in a codepen?

#9

@mhartington

Can you please have a look at this link?
I hope it shows up. As you can see there is no tab above the sub-header, yet it is showing below and there is an awkward space and the sub-header is actually floating.

Codepen I am not sure as it wont detect the platform.

#10

Right, it won’t see the platform, but I can pull the codepen down and make a project from it :wink:

#11

@mhartington
Ok I will try and do it…

But its nothing… simply add tabs, and add sub-header to it.
Nothing more or nothing less.

You will see that in views without tabs in the project, the sub-header move down.

#12

Alright, I’ll go from there

#13

Hmm, not seeing this locally.

2 Likes
#14

@mhartington
All we did is :- we added your following code to the style.css file
.platform-android .bar-subheader.has-tabs-top{
top:93px !important;
}

.platform-android .has-subheader.has-tabs-top{
top:137px;
}

nothing else. And the subheader moved down.
Please let us know are we supposed to do something else also?

#15

Hmm, try removing the !important?
Other than that, I can’t know for sure with out looking at some code.

If you want, feel free to PM me and I could take a look at things.

#16

Hi,

I am new to Ionic and I have the same problem, plus I’m using SASS instead of the style.css
[EDIT] : adding the two snippets to .scss didn’t help (nothing changed).

Someone who can help?

Thanks a lot,
Stefano

#17

There is still problem with subheader under tabs in android. Any new results?

#18

I’m still seeing this problem as well. Ionic v1.0 boilerplate tabs starter project with bar-subheader added. Looks fine on IOS but subheader gets hidden behind (top-positioned) tabs on Android. Any pointers? I can “fix” this by pushing the tabs to the bottom of the screen (IOS-style) but I’d really rather not.

(Turns out if I push the tabs to the bottom of the screen on Android I run into another Ionic 1.0.0 bug: the soft keyboard doesn’t hide the tabs when it slides up, it just pushes them up, severely limiting the input view. I’ve seen this mentioned other places on the forum)

#19

Hi guys,
I found another trick to solve this problem.
What I did is add a extra class in .bar-subheader (lets say .bar-custom) then just added this following CSS in style.css file.

.platform-android .bar-custom{
   top: 93px;
 }

And that’s solved my problem.

3 Likes
"bar-subheader" vs "sub-header"
#20

Same problem here… none of the suggested solutions seem to work.