Problem With ion-list

ionic-v1
1

Hi there,

I have a simple application right now using the the ionic navigation system. There’s a nav-bar and an ion-list element. The only problem I’m having is that the first element in the list is being hidden by the nav-bar. The codepen can be seen here http://codepen.io/anon/pen/nkfCb.

Thanks a lot for your help.

2

You need to wrap your ion-list in an ion-content with class has-header.

So:

  <ion-view title="Title">

    <ion-nav-bar class="bar-light">
        <ion-nav-back-button class="button-clear button-positive">
            <i class="icon ion-chevron-left"></i> Title
        </ion-nav-back-button>
    </ion-nav-bar>

    <ion-content class="has-header">
    <ion-list ng-controller="IndexPageController">
        <ion-item ng-repeat="listString in listStrings">
            {{listString}}
        </ion-item>
    </ion-list>
    </ion-content>
</ion-view>
1 Like
3

Thanks a lot. That worked.

4

Background for why:

Basically all actual content for a detailed view needs to be put inside an ion-content element. Ion-content elements enable smooth scrolling behavior with elastic behavior, it will allow allow animated scrolling to elements within your ion-content.

Adding the class has-header will make sure the ion-content will be positioned underneath a header-bar, whether you are actually using that or not.

5

Haha. Thanks a lot for the background It actually solved the not bouncing problem I was having. Is there some place in the docs where I can read up on this?

6

No worries :slight_smile:

All docs are available at the documentation pages:
http://ionicframework.com/docs/overview/

Specific information on ion-content:
http://ionicframework.com/docs/api/directive/ionContent/

Good luck!