it-swarm.com.de

ioneninhalt überlappt sich mit der Kopfzeile der Ionen

Ich baue phonegap-Apps auf Basis ionischer Frameworks. In einer HTML-Seite brauche ich einen Header und einen Inhalt. Aber der Header überlappt sich mit dem Inhalt. Es tut mir leid, dass ich keinen guten Ruf habe, um das Bild zu posten.

Der Code folgt. Die HTML-Seite befindet sich im selben Ordner wie der Ordner lib, der die Ordner ionic css und js enthält.

    <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>
46
BAE

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

Geben Sie class = "has-header" für den Ioneninhalt an.

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

Und Sie müssen Ihre Winkel-App initialisieren - siehe Javascript in meinem Beispiel. Hinweis ng-Controller und ng-app.

86
user1788175

Kam hier mit demselben Problem mit Ionic 2: Navbar überlappt den Inhalt. In meinem Fall lag es daran, dass ich einen Ionengehalt hatte. Die Lösung bestand darin, * ngIf in ein inneres Element zu verschieben, zB ng-container (Danke @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

Sie können versuchen, die Klasse 'has-subheader' so zu setzen

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

Siehe: 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

has-header und alle CSS-Klassen und -Eigenschaften, die nicht in ionic funktionieren. Sie können es mit einem Polstertop versuchen

<ion-content padding-top>
<ion-grid padding-top>
  <ion-row padding-top>
    <ion-col padding-top>

        <ion-card class="foodCard">
          <img src="#">

            <ion-card-header>
              <ion-card-title>Card Title</ion-card-title>
            </ion-card-header>

            <ion-card-content>
              Keep close to Nature's heart... and break clear away, once in awhile,
              and climb a mountain.
            </ion-card-content>

          </ion-card> 

    </ion-col>
  </ion-row>
</ion-grid>
0
Aman Gupta

In meinem Fall hat das erste ein * ngIf mit Daten, die auf Benutzerrollen basieren, die ich bekomme, nachdem ein Benutzer angemeldet ist. Nach dem ersten Login, wenn die Daten im Speicher gespeichert sind, wird der Artikel angezeigt.

0
Bujar Deari