Ios app shows black bar below the header


#1

I am new to ionic mobile app development. I am working on one mobile app in which Android app work perfectly but on IOS it shows black bar below the header.

IOS :

Android :

Code of Screenshot screen :

<ion-content class="padding">
<div class="list">

    <a class="item item-icon-left" ui-sref="appBody.dashboard"> <i
        class="icon fa fa-tachometer"></i> Dashboard
    </a> <a class="item item-icon-left" href="#"> <i
        class="icon fa fa-lightbulb-o"></i> Opportunity
    </a> <a class="item item-icon-left" ui-sref="appBody.person"> <i
        class="icon fa fa-user"></i> Person <!--   <span class="item-note">
      Grammy
    </span> -->
    </a> <a class="item item-icon-left" ui-sref="appBody.scheduler"> <i
        class="icon fa fa-calendar"></i> Calendar <!-- <span class="badge badge-assertive">0</span> -->
    </a> <a class="item item-icon-left" ui-sref="appBody.product"> <i
        class="icon fa fa-cube"></i> Products
    </a> <a class="item item-icon-left" href="#"> <i
        class="icon fa fa-weixin"></i> Interactions
    </a> <a class="item item-icon-left" ui-sref="appBody.organization"> <i
        class="icon fa fa-building-o"></i> Organizations
    </a>
    <a class="item item-icon-left" ui-sref="appBody.priceBook"> <i
        class="icon ion-ios-book"></i> Price Book
    </a>
     <a class="item item-icon-left" ui-sref="appBody.visitplan"> <i
        class="icon fa fa-map-marker"></i> Visits
    </a>
     <a class="item item-icon-left" href="#"> <i
        class="icon ion-clipboard"></i> Place Order
    </a>
     <a class="item item-icon-left" ui-sref="appBody.competitors"> <i
        class="icon ion-ios-people"></i> DF SD
    </a>
     <a class="item item-icon-left" ui-sref="appBody.tax"> <i
        class="icon ion-ios-calculator"></i> DSAF SSF
    </a>
    <a class="item item-icon-left" ui-sref="appBody.serviceRequest"> <i
        class="icon ion-android-cart"></i> FADSF SDFIAF
    </a>
    <a class="item item-icon-left" ui-sref="appBody.baAttandance"> <i
        class="icon ion-android-checkbox-outline"></i> NFASDFJAGDS
    </a>
     <a class="item item-icon-left" ui-sref="appBody.uiTheme"> <i
        class="icon ion-gear-a"></i> ABCDEFF
    </a>

</div>
    <br><br><br>
</ion-content>

Code of App Body :

<ion-header-bar align-title="center" class={{headerThemeName}}>
<a class="button fa fa-th" style="font-size: 18px"
    ui-sref="appBody.menu"></a> <!-- <i class="fa fa-th"></i> -->
<h1 class="title">{{Title}}</h1>
<div class="buttons">
    <button class="button fa fa-search" style="font-size: 18px;"
        ui-sref="appBody.search"></button> 
    <button class="button ion-plus"
        style="font-size: 18px; margin-left: 3%" ng-click="addNew()" ng-show="addNewHS"></button>
</div>
</ion-header-bar>
<div style="padding-bottom: 15px">
<ion-spinner icon="spiral"  ng-show="hasPendingRequests()"></ion-spinner>
    <ion-nav-view class="padding has-header has-footer"
        overflow-scroll="true"></ion-nav-view>

</div>

Any help would be appreciate. Thanks.


#2

Okay so the general structure for an Ionic app with routing is like this:

<ion-nav-bar></ion-nav-bar>

<!-- optional subheader for all views -->
<ion-header-bar class="bar-subheader"></ion-header-bar>

<ion-nav-view></ion-nav-view>

<!-- optional footer for all views -->
<ion-footer-bar></ion-footer-bar>

Or if you don’t want to use the ion-nav-bar (which updates as you navigate), you can use the ion-header-bar like you are doing:

<ion-header-bar></ion-header-bar>

<!-- optional subheader for all views -->
<ion-header-bar class="bar-subheader"></ion-header-bar>

<ion-nav-view></ion-nav-view>

<!-- optional footer for all views -->
<ion-footer-bar></ion-footer-bar>

And then the view that gets inserted inside of the ion-nav-view would be:

<ion-view>
    <!-- optional subheader for that view -->
    <ion-header-bar class="bar-subheader"></ion-header-bar>

    <ion-content>
        Content for the view
    </ion-content>

    <!-- optional footer for that view -->
    <ion-footer-bar></ion-footer-bar>
</ion-view>

Of course this varies, but this is in the simplest form. I wouldn’t recommend wrapping the ion-nav-view in a div, but applying the padding to the view itself instead.

It’s hard to tell what is causing the black box by looking at just the code. The ion-spinner could be causing it, you should put this in the view itself or in a sub-header. Also, you don’t need to add the has-header class or has-footer if you structure it properly. These classes are added automatically.

I threw together a Codepen restructuring some things: http://codepen.io/brandyshea/pen/garYBj

If this doesn’t help, can you put this in a Codepen, Plunker, JSFiddle or whatever you feel comfortable with, so I can reproduce it? We can create apps from Codepens using the CLI, for example:

ionic start codepenApp http://codepen.io/brandyshea/pen/garYBj

and then I can emulate it, so that would be ideal if possible. :smile: Feel free to send me a message if you have any questions.


#3

Thanks for your reply and suggestions.
By replacing the <ion-content> with <ion-scroll> in my code resolve the problem.

This is not a solution. I added another answer below which works for me.


#4

Ion-content is ion-scroll


#5

@brandyshea as per your suggestion for app structure i added <ion-view> to my app structure which i missed before and it resolve my problem.

@mhartington thanks for clarification.

I am waiting for fully ionic support for windows phone. :smile: