ionic ion-header-bar style is broken on ios

Question

I use the ionic framework to build applications on iOS and android. The problem is that the ion-header-bar style that is normally implemented on Android is awfully broken on iOS. Below is a screenshot of the mobile phone.

{left: ios, right: android}

Below is the main page debugged in Safari.

The blue shaded area is the header-bar area.

I wonder if there are options that I have to specify for ios separately. or override style.

Answer 1

I solved my problem by overriding the sass file. The style code added to the ionic.app.sass file is shown below.

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader)
  height: 84px
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper
    margin-top: 19px !important
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > *
    margin-top: 20px

.platform-ios.platform-cordova:not(.fullscreen) .has-header,
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader
  top: 84px

Thanks.

Answer 2

I think you have to use <ion-header> instead of <ion-header-bar> . Also close the same tag in your html file.

In my project it will working fine with <ion-header> .

Suggestion for write the tag :-

When you will go for write a tag <ion-header> at that time it can be possible framework will not give you a suggestion for this tag. Then also you can write and try with given tag.

Hopy it will work for you.