Header Title is hidden by Side Menu button on Android


#1

Hi all,

I have a weird issue with the header title on Android - and I hope someone is able to help me out.
When the app is loaded the header title is place behind the Side Menu button.

If I navigate to another view and then navigates back to the initial view everything is fine.

This is the code for the header of the view

<ion-view class="sfview" view-title="Seniorfestival 2015">
    <ion-header class="sfheader">
        <ion-nav-bar>
            <ion-nav-buttons side="left">
                <button menu-toggle="left" class="button button-icon icon ion-navicon" ng-if="isAndroid"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
      </ion-header>

      <ion-content class="has-header sfcontent">
          ...
      </ion-content>
</ion-view>

The header uses default alignment which is left on Android - and I’d like to keep it that way. The sfheader class only sets some colorings. The issue only arises on Android not on IOS or web. I just cannot figure out, why this happens - and I cannot think of a clever way to debug this on Android. I know it is not a big issue - but it really annoys my eyes :smile:

Thanks all


#2

Could you please clarify one thing.

At one point, you said:

If I navigate to another view and then navigates back to the initial view everything is fine.

At this point, header title is centered. But few sentences later you’re saying this:

The header uses default alignment which is left on Android - and I’d like to keep it that way.

So do you want it centered or aligned left? If you want it aligned left what specific outcome are you expecting?


#3

Ahh - thanks - I see the point of your question. The title is actually not centered - it is left aligned as I want it to but in the second dump it looks as centered as to the length of the title.

Here is a new dump from one of the other views with a shorter title. This is exactly what I want it to be like - left aligned (as the standard on Android) but with respect for the Side Menu button.