search

JKnorr91 / ion-slide-box-tabs

An Add-On directive for the ion-slide-box, that adds tabs to the slide box, known from the Android Material Design specification
MIT License
248 stars 110 forks source link

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

Open dharti-ru opened 7 years ago

dharti-ru commented 7 years ago

Hello,

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

screenshot_20170602-161228

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

uzumakinaruto123 commented 7 years ago

@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 commented 7 years ago

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

uzumakinaruto123 commented 7 years ago

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 commented 7 years ago

@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 commented 7 years ago

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