Sub Header not showing on Android with Tabs

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

hi,

check this codepan

1 Like

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

Here you go.

3 Likes

@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.

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

@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

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

@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.

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

@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.

Alright, I’ll go from there

Hmm, not seeing this locally.

2 Likes

@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?

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.

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

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

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)

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

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