IonContent spacer CSS issue with beta .14

ionic-v1
1

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:

image
Pasted image1876×663 129 KB

image
December_18__2014_at_0825AM.png1080×1920 1.04 MB

image
image.png1536×2048 342 KB

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

<ion-view view-title="Poker Games">
    <ion-content>
        <div>
            <location-Search/>
        </div>
        <ion-list>
            <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="http://www.pokerdiy.com/profilepic.ashx?userId={{gameAd.HostUserId}}&h=32&w=32">
                <h2>{{gameAd.Title}}</h2>
                <p>{{gameAd.City}}, hosted by {{gameAd.HostDisplayName}}</p>
                <i class="icon ion-chevron-right icon-accessory"></i>
            </ion-item>
            <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'}">
                </ng-pluralize>
            </div>
            <!--<div class="screenSpacer"></div>-->
        </ion-list>
    </ion-content>
</ion-view>

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

Menu View:



<ion-side-menu>
    <ion-header-bar align-title="left" class="bar-dark">
    </ion-header-bar>
    <ion-content >
   ....
    </ion-content>
</ion-side-menu>

Tabs View:

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

<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>
    <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>
    <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>
    </ion-tab>
</ion-tabs>
2

Hmm, not seeing it here.

Any chance you could provide a codepen?

3

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>
    </ion-nav-buttons>
</ion-nav-bar>
1 Like