web-dev-qa-db-fra.com

chevauchement du contenu en ions avec la barre d'en-tête des ions

Je construis des applications phonegap basées sur un cadre ionique. Dans une page html, j'ai besoin d'un en-tête et d'un contenu.Mais l'en-tête chevauche le contenu. Je suis désolé, je n'ai pas assez de réputation pour publier l'image.

Le code suit. La page html se trouve dans le même dossier que le dossier lib, qui contient les dossiers ionic css et js.

    <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'">&deg;F</button>
                  <button class="button button-positive button-radio" ng-value="'c'">&deg;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>
javascripthtmlcsscordovaionic-framework
46
BAE

voir: http://jsbin.com/pagacohovohe/1/edit

Donnez class = "has-header" à ion-content.

<ion-content class="has-header">
</ion-content>

Et vous devez initialiser votre application angulaire - Voir javascript sur mon exemple. Remarque ng-controller et ng-app.

86
user1788175

Venu ici ayant le même problème avec Ionic 2: Navbar recouvre le contenu. Dans mon cas, c'était parce que j'avais un * ngIf sur la teneur en ions. La solution consistait à déplacer * ngIf dans un élément interne, par exemple ng-container (Thanks @TwitchBronBron):

<ion-header>
  <ion-navbar>
    <ion-title>
      ...
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ng-container *ngIf="...">...</ng-container>
</ion-content>
12
corolla

Vous pouvez essayer de définir la classe 'has-subheader' comme ceci

    <ion-content class='has-header has-subheader'>
    ...
    </ion-content>

Voir: http://ionicframework.com/docs/components/#subheader

6
user875367
<ion-view view-title="BBS">
    <ion-header-bar class="bar bar-subheader">
        <div class="button-bar">
            <a class="button">web game</a>
            <a class="button">mobile game</a>
        </div>
    </ion-header-bar>
    <ion-content class="has-header">

    </ion-content>
</ion-view>
6
Shally12

Dans mon cas, le premier sur a un * ngIf avec des données basées sur les rôles d'utilisateur que je reçois après la connexion d'un utilisateur. Je me retrouve avec cet élément non affiché après la connexion. Après la première connexion lorsque les données sont stockées, l'élément est affiché.

0
Bujar Deari