web-dev-qa-db-fra.com

Barre de navigation ionique: le titre n'est pas centré sur l'appareil Android

Je suis très nouveau chez Ionic mais je l'aime déjà. Je voulais utiliser le nav-barso i implémenté l'index.html suivant:

<!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>

Dans mon app.js, je configure le chemin:

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("/");
});

Et un exemple de 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>

Lorsque je teste tout dans mon navigateur Google Chrome Chrome sur mon ordinateur, tout se passe comme il se doit. Le titre est centré.

Quand je le teste maintenant sur mon appareil Android (qui devrait également utiliser Google Chrome comme je le sais), j'obtiens le résultat suivant:

enter image description here

Comme vous pouvez le constater, le titre n'est pas centré. Comment puis-je résoudre ce problème? Malheureusement, je n'ai pas d'autre appareil pour le tester.

ionic-frameworkionic
26
Mulgard

Essayez d'ajouter l'attribut align-title="center" dans votre ion-nav-bar

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

De par leur conception, les titres Android sont alignés à gauche. Je pense que la bonne façon de changer ce comportement consiste à utiliser $ ionicConfigProvider dans votre méthode angular .config pour votre module angulaire principal. Ce fournisseur a une propriété navBar.alignTitle (valeur) où "valeur" peut être plateforme (par défaut), gauche, droite ou centre. Ceci est décrit dans la documentation ici

Par exemple

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

myApp.config(function($ionicConfigProvider) {

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

À mon avis, c’est la bonne façon de passer outre ce comportement. 

45
Sani Yusuf

J'ai écrit un correctif pour Ionic 2.0.x

Ajoutez le style suivant à votre fichier .scss (je l’ai placé dans 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;
  }
}

Après cela, ajoutez le balisage suivant à votre 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>
6
0x1ad2

Je pense que c'est une meilleure solution pour les images. Ajoutez-le à app.scss

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

Comme mentionné dans la réponse ci-dessus, vous pouvez simplement utiliser $ionicConfigProvider.navBar.alignTitle('center'); et remplacer le comportement de centrage de tous vos titres de vues. OU, si vous devez modifier la position du titre de votre vue sur d'autres vues, vous pouvez simplement utiliser la balise HTML center autour du titre. Vous pouvez voir la démo ici Ionic Title

4
SATISH

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

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

</ion-content>

1
user3736397

Salut je suis changé css et redéfinir le css comme ça 

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

son travail pour moi.

0
Anurag Pandey

J'ai essayé de nombreuses solutions répertoriées ici et je rencontrais toujours les 2 problèmes suivants avec les versions natives d'Android:

  1. Le texte du titre soit décalé du côté gauche de l'écran ou ne s'affiche tout simplement pas du tout
  2. Le texte du titre n'est pas centré verticalement dans la barre de navigation

Le CSS suivant a résolu ces deux problèmes pour moi:

.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;
}
0
Chris