CODEWITHSUNDEEP
ionic-framework
Mulgard
Mulgard

Reputation: 10589

Ionic nav-bar: Title is not centered on Android Device

Im very new to Ionic but i already like it. I wanted to use the nav-barso i implemented the following index.html:

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <!-- Ionic -->
    <link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.css">
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- myApp -->
    <link rel="stylesheet" type="text/css" href="css/general.css">
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/factory.js"></script>
    <script type="text/javascript" src="js/controller.js"></script>
</head>

<body>
    <ion-nav-bar class="bar-positive">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
</body>

</html>

In my app.js i configure the pathing:

var myApp = angular.module('myApp', ['ionic']);

myApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '/',
        templateUrl: 'views/home.html'
    }).state('prints', {
        url: '/prints',
        templateUrl: 'views/photo_prints.html'
    }).state('box', {
        url: '/box',
        templateUrl: 'views/photo_box.html'
    });

    $urlRouterProvider.otherwise("/");
});

And one example page:

<ion-view view-title="Home">
    <ion-content ng-controller="HomeController">
        <a href="#/prints">Prints</a></br></br>
        <a href="#/box">Box</a></br></br>
    </ion-content>
</ion-view>

When i test everything in my google chrome browser on my pc everything looks like it should. The title is centered.

When i now test it on my android device (which should also use google chrome as i know), i get the following result:

enter image description here

As you can see the Title is not centered. How can i fix that? Unfortunately i have no other device to test it.

Upvotes: 26

Views: 30771

Answers (9)

Chris
Chris

Reputation: 31

I tried many of the solutions listed here and still had the following 2 issues with native Android builds:

  1. The title text either getting shifted off the left side of the screen or just plain not appearing at all
  2. The title text not being vertically centered in the nav bar

The following CSS resolved both of these issues for me:

.platform-android .bar .title {
    line-height: 52px !important;  // vertically centers title on native Android builds
}

.bar .title {
    position: absolute;
    left: 0px !important;
    right: 0px !important;
    width: 100%;
    text-align: center !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

Upvotes: 0

kabus
kabus

Reputation: 909

I think that this is a better solution for images. Add it to app.scss

.back-button {
    z-index: 100;
}
ion-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

Upvotes: 6

Ricardo Berrospi
Ricardo Berrospi

Reputation: 11

<ion-header >
	<div align="center">
		<ion-navbar>
   		<ion-title primary>Tittle</ion-title>
  	</ion-navbar>
	</div>
</ion-header>

Upvotes: 1

0x1ad2
0x1ad2

Reputation: 8062

I wrote a fix for Ionic 2.0.x

Add the following style to your .scss file (I placed it in app.scss)

//  Centering title
// --------------------------------------------------
// a fix for centering the title on all the platforms

ion-header {
  .button-md {
    box-shadow: none;
  }

  .toolbar-title {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
}

After that add the following markup to your page

<ion-header>
  <!-- use ion-toolbar for a normal toolbar and ion-navbar for navigation -->
  <ion-toolbar>
    <ion-buttons left>
      <!-- left aligned content here -->
    </ion-buttons>

    <ion-title>
      Your title or image
    </ion-title>

    <ion-buttons right>
      <!-- left aligned content here -->
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Upvotes: 5

user3736397
user3736397

Reputation: 11

<ion-view>
<ion-nav-title class="title">Login
</ion-nav-title>
<ion-content>

</ion-content>

Upvotes: 1

Satish
Satish

Reputation: 173

As mentioned in the above answer, you can simply use $ionicConfigProvider.navBar.alignTitle('center'); and override the centering behavior of all your view titles. OR, if you need to change the position of your view title on other views, then you can simply make use of center HTML tag around the title. You can see the demo here Ionic Title

Upvotes: 4

Anurag Pandey
Anurag Pandey

Reputation: 744

Hi i am changed css and redefine the css like this 

.bar.bar-header .button+.title {
text-align: center !important;
left: 35px;
line-height: 46px;
}

its work for me.

Upvotes: 0

Sani Yusuf
Sani Yusuf

Reputation: 982

By design Android titles are aligned to the left. I believe the correct way to change this behaviour is by using the $ionicConfigProvider in your angular .config method for your main angular module. This provider has a property navBar.alignTitle(value) where "value" can be platform(default), left, right or center. This is described in the docs here

For example

var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {

  // note that you can also chain configs
  $ionicConfigProvider.navBar.alignTitle('center');
});

This In my opinion is the correct way to override this behaviour.

Upvotes: 45

Gisonrg
Gisonrg

Reputation: 519

Try add the align-title="center" attribute in your ion-nav-bar

<ion-nav-bar class="bar-positive" align-title="center">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

Upvotes: 37

Related Questions