ion-contenu de chevauchement avec d'ions en-tête de la barre
Je suis bâtiment phonegap applications basées sur ionic framework. Dans une page html, j'ai besoin d'un en-tête et un contenu.Mais l'en-tête des chevauchements avec le contenu. Je suis désolé, je n'ai pas assez de réputation pour afficher l'image.
Le code est le suivant. La page html dans le même dossier avec dossier lib, qui contient l'ionique, le css et le js dossiers.
<html>
<head>
<meta charset="utf-8">
<title>Weather</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="lib/css/ionic.css">
<script src="lib/js/ionic.bundle.js"></script>
<script src="lib/js/angular/angular-resource.js"></script>
</head>
<body>
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Settings</h1>
<button class="button button-clear" ng-click="closeSettings()">Close</button>
</ion-header-bar>
<ion-content has-header="true">
<div class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">Units</span>
<ion-radio-buttons ng-model="settings.tempUnits">
<button class="button button-positive button-radio" ng-value="'f'">°F</button>
<button class="button button-positive button-radio" ng-value="'c'">°C</button>
</ion-radio-buttons>
</label>
</div>
</div>
</ion-content>
<!-- <ion-pane id="wrapper"> -->
<!-- <ion-header-bar class="bar bar-header bar-dark">
<button class="button icon-left ion-chevron-left button-clear button-dark" onclick="goBack()">Back</button>
<div class="title">xxx</div>
<button class="button button-icon icon ion-navicon"></button>
</ion-header-bar>
</body>
</html>
Vous devez vous connecter pour publier un commentaire.
voir:http://jsbin.com/pagacohovohe/1/edit
Donner class="a-header" aux ions de contenu.
Et vous devez initialiser votre angulaire app - Voir le javascript sur mon exemple. Note ng-controller et ng-app.
Venu ici avoir le même problème avec Ionique 2: barre de navigation chevauchements de contenu. Dans mon cas, c'était parce que j'avais un *ngIf sur les ions de contenu. La Solution a été de passer *ngIf dans l'intérieur de l'élément, par exemple, gn-conteneur (Merci @TwitchBronBron):
<ng-container *ngIf="...">...</ng-container>
Vous pouvez essayer de mettre 'a-sous-en-tête" classe comme ceci
Voir: http://ionicframework.com/docs/components/#subheader
Dans mon cas, le premier sur a un *ngIf avec des données basées sur les rôles d'utilisateur auquel j'ai eu une fois un utilisateur est connecté. Je me retrouve avec ce point n'est pas affichée après la connexion. Après la première connexion, lorsque les données sont stockées dans le stockage puis l'élément apparaît.