Menu
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:
As you can see the Title is not centered. How can i fix that? Unfortunately i have no other device to test it.
718
To use a particular behavior you can use mode="md|ios" . md is for android and ios for IOS devices. Since you want to make the title on center, you can use mode="ios" which will make the toolbar title to be on center for both android and ios devices.
ion-navbar A navbar can contain a ion-title , any number of buttons, a segment, or a searchbar. Navbars must be placed within an <ion-header> in order for them to be placed above the content. It's important to note that navbar's are part of the dynamic navigation stack. If you need a static toolbar, use ion-toolbar.
The toolbar is a generic bar which is used in an app as a header, sub-header, footer, or sub-footer. It is positioned above or below the content. You can add more than one toolbar in your page, and the <ion-content> will adjust it accordingly.
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.
136
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>
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
