Title alignment for Android sits too far left

ionic-v1
1

I have an issue on Android where the header title sits too far to the left when I use side=“left” to introduce buttons that are not on all pages. From the image attached you can see that the FAQ title sits sung against the back however Notifications has a larger gap

image

The html generated for the back button shows the left style to only be 36px.

<div class="title title-left header-item" style="left: 36px; right: 75px;">FAQ's</div>

compared to the home button which is 58px

<div class="title title-left header-item" style="left: 58px; right: 75px;">Notifications</div>

I introduce the home button on pages that do not have the back button. My app is structured uses the side menu where I have the app header:

        <ion-nav-bar class="bar-stable app-header">

        <ion-nav-back-button></ion-nav-back-button>

        <ion-nav-buttons side="secondary">
            <button class="button button-outline button-energized" menu-toggle="right">Menu</button>
        </ion-nav-buttons>
	</ion-nav-bar>

And then in views where the back button does not appear but I want a home button to be visible

<ion-view hide-back-button="false">

<ion-nav-buttons side="left">
    <a class="button button-clear button-energized icon-left ion-home" href="#/app"></a>
</ion-nav-buttons>

<ion-content></ion-content></ion-view>

This issue seems to be that when left style is calculated for the home button scenario the use of the side=“left” generates a larger number.

I have tried styling the title via the ion-nav-title and using css to position a nested span relatively left -41px however this results in the title animation finishing then the 41px shift occurring, which does not look great.

Is there away to overwrite this style=“left: 58px; right: 75px;” being generated on the title so I can put in a custom size only on the page with the home button?

Cheers

2

It would appear that if you have

<ion-nav-back-button></ion-nav-back-button>

and

<ion-nav-buttons side="left">

in your app the title left style calculation will calculate the left space based on the width of both buttons regardless of how many buttons are visible. I got round this by modifying the back button to be the home button on the views I needed it for, therefore I don’t need the ion-nav-buttons directive so its only ever calculated of the width of 1 button.

In my .run setup I placed the following:

	$rootScope.backView = function () {

		if($state.current.name === "app.whateverView"){
			$state.go('app.home')
		}else{
			$ionicHistory.goBack();
		}
	}

and in my menu template:

<ion-nav-back-button ng-click="backView()"></ion-nav-back-button>

To make sure the back button is always displayed in the required views I added this to their controller

	$scope.$on('$ionicView.beforeEnter', function (e,config) {
		config.enableBack = true;
	});

And modified my existing view setup service that writes in a unique page classname into the html tag for each view to include the classname home-back which I could use as a hook to change the styling of the back button to a home icon on my chosen pages:

<html class="whatever-page home-back">

.home-back {
	.platform-ios,
	.platform-android {
		.bar .back-button .icon:before {
			content: "";
			font-size: 22px;
		}
	}
}

It all feels a bit hacky but works. Ideally the calculation would work based on the number of visible buttons.