Best IT Recipes

Ion overlap and ion-header-bar

I create phone applications based on ionic structure. On one html page, I need one header and one content. But the title overlaps with the content. I'm sorry that I do not have enough reputation to post the image.

The following code. The html page is located in the same folder with the lib folder, which contains ionic css and js folders.

<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
javascript html css cordova ionic-framework
Aug 20 '14 at 15:07
source share
6 answers

see below: http://jsbin.com/pagacohovohe/1/edit

Give class = "has-header" for ionic content.

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

And you need to initialize the angular application - see javascript on my example. Note ng-controller and ng-app.

+86
Aug 20 '14 at 15:12
source share

Had to have the same problem with Ionic 2: contents of Navbar overlays. In my case, it was due to the fact that I had ionic content. The solution was to move * ngIf to an internal element, like 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>
+13
Mar 03 '17 at 21:57
source share

You can try setting the has-subheader class as follows

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

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

+6
Jul 12 '15 at 15:59
source share
 <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
Aug 28 '15 at 6:24
source share

In my case, the first one has * ngIf with data based on user roles that I get after a user logs in. Ultimately, this item is not displayed after logging in. After the first login, when the data is stored in the storage, the item shows.

0
May 26 '17 at 7:08
source share

has-header and any CSS class & property does not work in ionic. You can try the top layer

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

0
Aug 30 '19 at 15:15
source share


More articles:


All Articles