White line above header

ionic-v1
1

Hi!
I am having a problem with a white line above header running on my Android 4.0.3! This is not a Cordova issue because I am also creating a app using cordova, jquery-mobile and everything is fine so this issue is with ionic and needs to be fixed.
Could anybody help me?

2

Hmm, I’ve seen this before but it’s always been an issue with cordova. Any chance you get a screen capture or something?

3

Hello! Anybody know how to fix this problem?

4

i do not have this issue in my ionic apps, so it would be really helpful if you may post a screenshot or a little codepen of your appstructure.

Geets, bengtler

5

I have the same issue.

follow the screenshot!

6

You can overwrite it in your sass or css file.

It is the iOS7 statusbar bug.
Solution set fixed height for the headerbar if it is a iOS7 device.

The css-class for the selektor can be found at the ion-content. (should be something like platform-ios7)

greetz.

7

I found a solution.

Override the background image of bar, like this:

.bar {
border: none;
background-image: none !important;
}

2 Likes
8

Ah okay now i’ve got it^^.

I thought the red area is too high.
Yep the little white line is the border of the headerbar/ ionic panes.

Sorry for missunderstanding.
But over the platform class you could implement an ios7 fix for the headerbar height.

Greetz, bengtler