CODEWITHSUNDEEP
ionic-frameworkionic3
Shreyas Pednekar
Shreyas Pednekar

Reputation: 1305

Ionic 3: How to fix ion-list-header at the top and scroll only list-item, not ion-content?

I have an ion-list on page, and I want to scroll only list-item, not the whole ion-content.

Here is my code:

<ion-content scroll="false" no-padding>
    <ion-list>
        <ion-list-header>Select your Status</ion-list-header>

        <ion-scroll style="width:100%; height:100vh" scrollY="true">
           <ion-item>
               <h2>Available</h2>
           </ion-item>
           <ion-item>
               <h2>Busy</h2>
           </ion-item>
           <ion-item>
               <h2>At school</h2>
           </ion-item>
           <ion-item>
               <h2>At the movies</h2>
           </ion-item>
           <ion-item>
               <h2>At work</h2>
           </ion-item>
           <ion-item>
               <h2>Battery about to die</h2>
           </ion-item>
           <ion-item>
               <h2>Can't talk, text only</h2>
           </ion-item>
           <ion-item>
               <h2>In a meeting</h2>
           </ion-item>
           <ion-item>
               <h2>At the gym</h2>
           </ion-item>
           <ion-item>
               <h2>Sleeping</h2>
           </ion-item>
           <ion-item>
               <h2>Urgent calls only</h2>
           </ion-item>
       </ion-scroll>
    </ion-list>
</ion-content>

image1 image2

I want to fix list-header "Select your status" and scroll only other list-items, but it hides list-header even when I have set scroll="false" to ion-content. Please help. Thanks in advance.

Upvotes: 3

Views: 12981

Answers (2)

Chinmay Mourya
Chinmay Mourya

Reputation: 1

Add "sticky" attribute in ion-list-header tag.

Applicable in ionic 2, ionic 3, ionic 4

Upvotes: 0

Huiting
Huiting

Reputation: 1396

You can do as such:

html

<ion-header>
  <ion-list-header>Select your Status</ion-list-header>
</ion-header>

<ion-content scroll="false" no-padding>
  <ion-list>
    <ion-scroll style="width:100%; height:100vh" scrollY="true">
      <ion-item>
        <h2>Available</h2>
      </ion-item>
      ...
    </ion-scroll>
  </ion-list>
</ion-content>

Position your ion-list-header inside of ion-header to make it sticky

Result:

enter image description here

Upvotes: 8

Related Questions