Fixed content and a list view in the same ionic view

ionic-v1
1

Hi all, I’m very new to ionic framework and struggling for writing a view with a fixed content area on the top and list at the bottom shown below. The upper layout is fixed area to show the user profile and bottom colored in red is list view scrollable. When I have used ion-content the complete view is scrollable or if I use ion-list it occupies the complete view area. Can anyone please help me with sample code on how to make this view with ionic framework.

image
Screenshot from 2015-12-24 06:00:15.png482×756 74.4 KB

Regards

2

Here is how I would do it.

<ion-view>
  <ion-header>
    // header html
  </ion-header>
  <ion-content class="list">
    <ion-list>
      <ion-item ng-repeat="item in items">
      </ion-item>
    </ion-list>
  </ion-content
</ion-view>

Now your list class needs to set the top of your ion-content down below your header. So the css would look something like this.

.list {
  top: 100px // or whatever your header height is
}

Haven’t tested this out yet, but something like this should work.

3

Problem is I already have another header with title and side buttons.

4

@trevorhanus, thanks for the help. I’m using the sub-header for my case. Thank you very much.

5

Oh awesome! Glad you figured it out.