How to align <ion-view> title to left side of nav bar

ionic-v1
1

Hello, Is there any way we can alight title to left. I need to add more icons to right.

<ion-view title="Schedule" ng-controller="scheduleDay as vm" hide-back-button="true">

<ion-nav-buttons side="left">
    <a class="button button-clear button-icon icon ion-chevron-left" ui-sref="app.home"></a> 
    <button class="button button-icon icon ion-grid" ng-click="vm.goToScheduleAgenda()"></button>       
</ion-nav-buttons>
<ion-nav-buttons side="right">        
    <button class="button button-icon icon ion-map" ng-click="vm.goToScheduleMap()"></button>
    <button class="button button-icon icon ion-plus-round" ng-show="vm.canScheduleMeeting()" ng-click="vm.scheduleMeeting()"></button>
</ion-nav-buttons>

image

2

Add this to your .config

sample code:

ionicApp.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.navBar.alignTitle('left')
});
4 Likes
3

This might align title to left for all screens. I should align for only specific screens.

Any help?

1 Like
4

You can always use $ionicNavBarDelegate.align('left');

http://ionicframework.com/docs/api/service/$ionicNavBarDelegate/

5

I tried but it was not taking effect. When I added inside my controller it is not taking effect. (I injected $ionicNavBarDelegate to my controller.)

Here is my controller

 function login($state, $stateParams, $ionicLoading, $cordovaDialogs, claimsApi, cacheService, initialDataService, photoManagerService,$ionicNavBarDelegate) {    

        activate();    
        function activate() {
             $ionicNavBarDelegate.align('left');}

}

Actually here is how I implement my screens. Is there any thing I am missing here?
In index.html

<ion-side-menu-content>
        <!--This pane is main window for entire application-->
        <ion-nav-bar class="bar-positive nav-title-slide-ios7" align-title="left">
            <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> </ion-nav-back-button>
        </ion-nav-bar>        
        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
    </ion-side-menu-content>

In each screen

<ion-view title="Schedule" ng-controller="scheduleDay as vm" hide-back-button="true">

    <ion-nav-buttons side="left">
        <a class="button button-clear button-icon icon ion-chevron-left" ui-sref="app.home"></a> 
        <button class="button button-icon icon ion-grid" ng-click="vm.goToScheduleAgenda()"></button>       
    </ion-nav-buttons>
    <ion-nav-buttons side="right">        
        <button class="button button-icon icon ion-map" ng-click="vm.goToScheduleMap()"></button>
        <button class="button button-icon icon ion-plus-round" ng-show="vm.canScheduleMeeting()" ng-click="vm.scheduleMeeting()"></button>
    </ion-nav-buttons>
6

$ionicNavBarDelegate.align(‘center’); in my controller also doesn’t work. Even if i change align-title of ion-header-bar it still doesn’t change.

7

have you tried to set it up in your .config ?

.config(function( $ionicConfigProvider) {
       $ionicConfigProvider.navBar.alignTitle('center');
});

this worked for me

1 Like
8

Add the align-title=“center” attribute in your ion-nav-bar

<ion-nav-bar class="..." align-title="left"> 
    ...
</ion-nav-bar>
2 Likes
9

I found this works for me. I needed to dynamically change the title alignment per controller:

$scope.$on('$ionicView.enter', function()
{
    $timeout(function()
    {
        $ionicNavBarDelegate.align('left');
    });
});
2 Likes
10

@Greycloak 's solution was the only thing that worked for me.

11

Thanks @Greycloak, it’s working for me as well

12

thanks this worked for my project

13

Thanks a lot. This works . I was able to set alignment of my title to Center using using this.

14

With this approach, during the development time, I can see the title moving from right to center; but when I deploy the app to a device, it works perfectly. Thanks.