IonContent spacer CSS issue with beta .14


Since upgrading to .14 beta I now have a large space in any screen that uses ion-content.

It is something to do with “has-header” which is adding the padding.

It happens on iOS and Android (these are actual device screenshots):

Any suggestions appreciated…

Here is the problem in the debugger:

View code (you can remove ever ything between ion-content tags and the problem remains:

<ion-view view-title="Poker Games">
            <ion-item ng-repeat="gameAd in gameAds" ui-sref="app.tabs.gameDetail({ gameAdId: gameAd.GameId, gameHostUserId: gameAd.HostUserId })" class="item-icon-right item-avatar">
                <img ng-src="{{gameAd.HostUserId}}&h=32&w=32">
                <p>{{gameAd.City}}, hosted by {{gameAd.HostDisplayName}}</p>
                <i class="icon ion-chevron-right icon-accessory"></i>
            <div class="item item-divider">
                <ng-pluralize count="gameAds.length"
                              when="{ '0': 'No games in this area',
                              'one': '1 game in this area',
                              'other': '{} games in this area'}">
            <!--<div class="screenSpacer"></div>-->

It might also be something to do with the fact that this view is in a Menu with Tabs:

Menu View:

    <ion-header-bar align-title="left" class="bar-dark">
    <ion-content >

Tabs View:

<ion-nav-bar class="bar-assertive">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>

<ion-tabs class="tabs-light tabs-icon-top">
    <ion-tab title="Find a Game" icon-on="ion-ios7-world" icon-off="ion-ios7-world-outline" ui-sref="app.tabs.gamesMap">
        <ion-nav-view name="tab-gamesMap"></ion-nav-view>
    <ion-tab title="Games List" icon-on="ion-ios7-paper" icon-off="ion-ios7-paper-outline" ui-sref="app.tabs.gamesList">
        <ion-nav-view name="tab-gamesList"></ion-nav-view>
    <ion-tab title="Add a Game" icon-on="ion-ios7-plus" icon-off="ion-plus-round" ng-click="addGame()">
        <ion-nav-view name="tab-gameAdd"></ion-nav-view>


Hmm, not seeing it here.

Any chance you could provide a codepen?


Thanks for the quick response! - I have found the problem:

In Tabs.html, I did not have my “button” wrapped with “ion-nav-buttons side=“left”” (it was the next problem on my list I was fixing and as soon as I added that in the spacing disappeared).

So all is well- really appreciate all the hardwork put into Ionic.

<ion-nav-bar class="bar-assertive">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>