Ion-slide box issue


I have 4 slide which is coming ng-repeat. Each slide has more then 100 lines of content. while sliding, Content is getting overlap on footer (ion-tab bar) for few second. How can fix it ?


How do you have the slide marked up?

This the code for sliding-
    <ion-slide-box on-slide-changed="slideChanged(index)">
                <ion-slide ng-repeat="index in practicSupportSlideMenuDisplay">
                    <div id="contant"  class="slideContent scroll">
                        <div class="imageBackground">
                            <div class="image"><img  style="width: 100%" src="img/{{index.supportIndexDetailImg}}.png" ></div>
                        <div class="display-contant">
                            <div class="padding">`enter preformatted text here`
                                <button type="button" style="margin-bottom:2%;" id="submit" class="button" ng-click="downloadeFileFromServer(index.supportIndexDetailDownloadURL)">Get a Copy</button>


Try using this markup

      <!-- Your content --> 

And add this css.

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

It will put your content inside and ion-content, and that will adjust for your footer


Ok. i will try in above structure and let you know.

But,In sliding there is one more issue. I have three slide with different height.
1- 1000px
2- 3000px
3- 4000px
For slide first and second taking height 4000px. why?
It should take as per the content.
How can we resolve this issue?


Is your slide-box wrapped by an ion-content? If so, it shouldn’t. Open you app in Chrome or Safari, try seeing if there are and console issues or weird css errors. There are many things that could be wrong