ioni contenuti si sovrappongono con ioni-intestazione-bar

Sto costruendo phonegap applicazioni basate su ionico quadro. In una pagina html, ho bisogno di una intestazione e un contenuto.Ma l’intestazione si sovrappone con il contenuto. Mi dispiace non ho abbastanza reputazione per inserire l’immagine.

Il codice è il seguente. La pagina html è nella stessa cartella della cartella lib, che contiene gli ionici, css e js cartelle.

    <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>
InformationsquelleAutor BAE | 2014-08-20



6 Replies
  1. 86

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

    Dare class=”ha-header” a ioni contenuti.

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

    Ed è necessario inizializzare il angolari app – Vedere javascript sul mio esempio. Nota ng-controller e ng-app.

    • Grazie. Ma ancora si sovrappone.
    • provare la mia nuova risposta.
    • Grazie. Ma ancora si sovrappone.
    • controllare il link che ho postato.
    • Grazie. Ora funziona. Ho usato il javascript che mi hai dato per inizializzare la pagina html e ora funziona. Grazie per il vostro aiuto.
    • Questo succede se il codice javascript è qualche errore. Impedisce ioinc dall’impostazione di visualizzazione del titolo e, a sua volta, aggiungendo il “intestazione” automaticamente.
    • Questo sta accadendo a me e non riesco a capire dove è l’errore. Ionico Servire console non da errori e posso controllare il mio codice è come il link in questa risposta.
    • Stesso qui. App inizializzato. ha-header aggiunto. Ma non risolvere. Solo in grado di risolvere con ulteriori DIV e “imbottitura” classe”. Che aggiungere ulteriore spazio tra il contenuto e l’intestazione. Non raffreddare. Ancora la speranza di trovare la causa reale e vera correzione. Ma a causa di correre per il completamento, prendo solo l’extra DIV wrapper con imbottitura in classe come soluzione temporanea.
    • Grazie che funziona però se voglio comuni dichiarazione del contenuto principale index.html il modello che include altri partial sembra <ione-nav-view ></ion-nav-view> se si rompe embedded come che

  2. 13

    Venuto qui con lo stesso problema Ionico 2: Navbar sovrapposizioni di contenuto. Nel mio caso, è stato perché ho avuto un *ngIf su di ioni contenuti. La soluzione era quella di spostare *ngIf in elemento interno, ad esempio, ng-contenitore (Grazie @TwitchBronBron):

    <ion-header>
      <ion-navbar>
        <ion-title>
          ...
        </ion-title>
      </ion-navbar>
    </ion-header>
    <ion-content padding>
      <ng-container *ngIf="...">...</ng-container>
    </ion-content>
    • Grazie, questo era il mio problema! Qualsiasi idea se questo potrebbe causare problemi con il piè di pagina della barra di navigazione fare la stessa cosa?
    • Se non si desidera aggiungere un nuovo elemento, si potrebbe anche usare <ng-container *ngIf="...">...</ng-container>
  3. 6
    <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>
  4. 0

    Nel mio caso il primo ha un *ngIf con i dati basati sui ruoli utente che ottengo dopo che un utente si è loggato. Io alla fine con questa voce non viene visualizzata dopo il login. Dopo il primo accesso quando i dati sono memorizzati in deposito e poi la voce mostra.

  5. 0

    ha di intestazione e di qualsiasi classe css & immobili non di lavoro, di ordine ionico.
    Si può provare padding-top

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

Lascia un commento