Problem With ion-list

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

Thanks a lot for your help.

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


  <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-content class="has-header">
    <ion-list ng-controller="IndexPageController">
        <ion-item ng-repeat="listString in listStrings">
1 Like

Thanks a lot. That worked.

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.

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?

No worries :slight_smile:

All docs are available at the documentation pages:

Specific information on ion-content:

Good luck!