Freeze headers on scroll in <ion-slide-box>

[dharti-ru]

Hello,

I am using in my mobile app. When scrolled in y-direction to fill up the fields, my tab headings go up.

I want to freeze the tab headers just as my main header. Can anyone please help.

[uzumakinaruto123]

@RohitrahD Try adding scroll="false" to your main outer <ion-content>. Then add independent ion-content/ion-scroll within each ion-slide

Something like this,

<ion-content scroll="false">
    <ion-slide-box show-pager="false" ion-slide-tabs>
        <ion-slide ion-slide-tab-label="test">
               <ion-scroll>
                        <h1>Tab 1</h1>
                        // Your Form
                </ion-scroll>
        </ion-slide>
    </ion-slide-box>
</ion-content>

[dharti-ru]

@uzumakinaruto123 I tried the code give by you but it didn't work :(

[uzumakinaruto123]

what happens with this structure? Did main content scrolling stop? The first thing to do is stop the content scroll.

Maybe ion-content properties are getting overridden. Force ion-content to not scroll overflow:hidden in page css OR if the content has stopped scrolling and ion-scroll is not scrolling then <ion-scroll> is missing some property like direction maybe. Sorry I lost touch with Ionic 1 :p

[dharti-ru]

@uzumakinaruto123 I noticed one thing in my code now.

For .slider-slide class, height is set to 100%. The slide container's height was 622px. So when I changed it to 500px i.e. less than 600px, it started scrolling. But the issue is what to do when it comes to different dimensions of device?

I even tried height: auto but it takes 100% by default.

[uzumakinaruto123]

Using px units would be a temporary fix! Keep height: 100% and add overflow:scroll !important . It would get easier if you could reproduce it with plunkr or jsfiddle