Перекрытие ионов и ион-заголовок-бар

Я создаю телефонные приложения на основе ионной структуры. На одной странице html мне нужен один заголовок и один контент. Но заголовок перекрывается с контентом. Я сожалею, что у меня недостаточно репутации, чтобы опубликовать изображение.

Следующий код. Страница html находится в той же папке с папкой lib, которая содержит ионные css и 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>

Ответы

Ответ 1

см. ниже: http://jsbin.com/pagacohovohe/1/edit

Дайте class= "has-header" для ионного содержимого.

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

И вам нужно инициализировать приложение angular - см. javascript на моем примере. Примечание ng-controller и ng-app.

Ответ 2

Приходилось иметь ту же проблему с Ionic 2: содержимое перекрытий Navbar. В моем случае это было связано с тем, что у меня был ионный контент. Решением было перемещение * ngIf во внутренний элемент, например ng-container (спасибо @TwitchBronBron):

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

Ответ 3

Вы можете попробовать установить класс "has-subheader" следующим образом

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

Смотрите: http://ionicframework.com/docs/components/#subheader

Ответ 4

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

Ответ 5

В моем случае первый имеет * ngIf с данными, основанными на пользовательских ролях, которые я получаю после входа пользователя в систему. В конечном итоге этот элемент не отображается после входа в систему. После первого входа в систему, когда данные хранятся в хранилище, элемент показывает.

Ответ 6

has-header и любой класс CSS & свойство не работает в ионном. Вы можете попробовать верхний слой

<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 heart... and break clear away, once in awhile,
              and climb a mountain.
            </ion-card-content>

          </ion-card> 

    </ion-col>
  </ion-row>
</ion-grid>