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.