How to set header(fixed div on top) in ion-content before ion-refresher

#1

My code:

<ion-view title="XXX">
<ion-content>
    <div class="row" style="height: 40px; line-height: 40px; padding: 0px; ">
        <div class="col col-20">search:</div>
        <div class="col">
            <input type="text" style="height: 30px; margin-top: 5px" ng-model="data.search">
        </div>
        <div class="col col-10" ng-click="search()"><i class="icon ion-ios7-search"></i></div>
    </div>
    <ion-refresher
            pulling-text="refresh..."
            on-refresh="refresher()">
    </ion-refresher>
    <ion-list>
        <ion-item>
         .........
        </ion-item>
    </ion-list>
</ion-content>

When I drop down on my screen to refresh page, the drop down gesture also affect on row div
The ‘refresh…’ message before row div
I want to fix row div on top, only refresh ion-list
How can i do that?

#2

Hey :smile:

Can you put this into a codepen? It can really help to solve the issue.

#3

Hi

This is example code for my problem:

want to fix search row and only list area can be drop down when I refresh

Thanks

#4

You can use a ion-header-bar with a class of sub-header for this :smile:

#5

I found your codepen example also has the issue described here

#6

Thanks for your help.

#7

THANK YOU @mhartington! :slight_smile: You’re good :slight_smile: