Scroll Issue with Ion-content and Ion-slide-box

ionic-v1
1

Hello,

I am unable to scroll with the app I am working on. I’m new to Ionic Framework so I might be using it incorrectly.

When I try to scroll it just pulls the entire content up or down. It doesn’t scroll the specific slide. The following is the structure of one of the pages in my application.

I am wrapping the code below with Ion-Content but for some reason in the post it doesn’t show up.

ion-content id= "gamestatscont"  class="iphoneWidth"  has-header="true" has-footer="false"  scroll="true">

ion-content>

I apologize if the code pasted is hard to read. I tried cleaning it up at a bit to make it more legible.

Thanks ahead of time!

Games Players Stats 
<ion-slide-box class="sepcont" show-pager="false" on-slide-changed="slideChanged(index)" active-slide="activeSlide" disable-scroll="false">
  <ion-slide>
    <div id="gameslide">
        <div class="gameinfocont" >
            <p id="nextgamelbl">Next Game</p>
            <div class="gamesButton" ng-click="yell()">Full Schedule</div>
            <div class="gameinfo" ng-click="yell()">
                <button class="button button-icon icon ion-chevron-right gameinfoarrow"></button>
                <p class="opponentname"></p>
                <p class="gamedate"></p>
                <p class="location"></p>
            </div> 
        </div>
        <div class="gameinfocont">
            <p id="prevgamelbl">Previous Game</p>
            <div class="gamesButton" ng-click="yell()">View All</div>
            <div class="gameinfo" ng-click="yell()">
                <button class="button button-icon icon ion-chevron-right gameinfoarrow"></button>
                <p class="opponentname"></p>
                <p class="gamedate"></p>
                <p class="score"></p>
            </div> 
        </div>
        <div id="recordstatsmsg">
            <div id="rdmessagecont" ng-click="yell()">
                <p>Want to record stats for this team?</p>
                <p>Tap here to get the stat keeping app.</p>
            </div>

        </div>
     </div>
  </ion-slide>
  <ion-slide>
        <div class="list">
            <a class="item" href="#" ng-repeat="player in players">
                <p class="playersname">{{player.name}}</p>
            </a>
        </div>
  </ion-slide>
  <ion-slide>

    <div id="mainStats">
        <div id="gamestatsFilterDiv">
          <select class="statsdropdown yeargamesdrop" ng-model="statsYear"  ng-options="y.value as y.name for y in statsYears"></select>
          <select class="statsdropdown yeargamesdrop" ng-model="statsGame"  ng-options="g.value as g.name for g in statsGames"></select>
          <select id="statsplayerdrop" class="statsdropdown" ng-model="statsPlayer"  ng-options="p.value as p.name for p in statsPlayers"></select>
        </div>
       <!--<ion-scroll>-->
        <div id="gamestatsDropDiv">

            <div class="statsbarcont" ng-click="expandStats('Averages')">
                Season Averages
                <a class="PlusButton"> {{expandSignAvg}} </a>
            </div>
            <div ng-show="showAverage">
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>

            </div>

            <div class="statsbarcont" ng-click="expandStats('Totals')">
                Season Totals
                <a class="PlusButton" ng-click="expandStats('Totals')"> {{expandSignTot}} </a>
            </div>
            <div ng-show='showTotals'>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>

            </div>

            <div class="statsbarcont" ng-click="expandStats('Graph')">
                Points Graph
            </div>
            <div ng-show='showGraph'>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>
                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>

                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>

                </div>
                <div class="row evenrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>

                </div>
                <div class="row oddrow">
                    <div class="col lblcol col-25">
                        <p class="statvalue"></p>
                    </div>

                </div>

            </div>

        </div>
       <!--</ion-scroll>-->
     </div>

  </ion-slide>

</ion-slide-box>
2

If you want to be able to scroll the content of the slide, try putting the ion-content inside the slide.

<ion-slide-box>
  <ion-slide>
    <ion-content></ion-content>
  </ion-slide>
</ion-slide-box>
3

Thanks for the reply mhartington.

Unfortunately adding the <ion-content> did not work. It messes up the <slide-box> pretty badly. Somehow it made all the <ion slides> disappear or display in different order.

I removed the Height CSS from the <Ion-content>(that I added) and I am able to scroll now. It takes the about 1 second after expanding the DIVs so the browser/application recognize the height changed and allow me to scroll. Is this normal?

Oh I forgot to add that when I change slides and the other slide(s) has a height larger than the current slide, it lets me scroll through empty white space. Is there a fix to this?

Also, I am using Chrome to test my application as well as their built in emulation for the Galaxy S4 and IPhone 5. Can this be the problem? Anyone recommend another application to view/test?

4

Give this a try, I forgot that when you move the ion-content inside the slide-box, it will disappear because the slide-box doesn’t have any sizing to it.

I put this together for someone else some time ago and it works pretty well. What do you think?

5

The codepen you provided seems to work well. I copied and pasted 10 exact DIVs in the 2nd slide and I was able to scroll easily.

However, I tried to remove the outer layer ion-content from my application and follow your structure. It still did not work. I got the same result (disappearing content and etc).

I am not using the beta ionic bundle so hopefully that isn’t the issue. I will try to migrate my application to the codepen you did and see if it works. I’ll keep this forums posted.

Thanks,

Arcen

6

Did you copy over the css from the codepen?

7

I haven’t had time yet but plan to work on it soon.I also need to update to the latest ionic bundle as well.

I’ll get back asap.

8

@mhartington So I added the CSS and it worked. Thanks. Not really sure how the CSS made it work but I’ll look into that some other time.

However I am having an issue implementing it with my page. In my first post I have a DIV on top of the SlideBox which everything is inside an Ion-Content. This is so I can use Ion-content has-header=“true” which would allow me to have my header and sub header on my page.

Now with the Codepen you gave me, everything works(scrolling and etc) but the original DIV on top is not hiding under the SlideBox/Ion-Content. To overcome this I added margin-top to a percentage to make it go under the DIV. But then I am not able to move the entire content to be bloew the header and subheader.

Is there a work around for this? I tried removing the position:absolute from the CSS but the Ion-Content would disappear.

9

I decided to just move everything over and just change the top margin CSS for both the Tabs and SlideBox. The scrolling issue is resolved.

Thanks for the help!

10

Hey @mhartington it looks like it’s working perfectly … but I have an issue with the scrolling position as it seems that both slides are dependent … when scrolling down in one slide for example it scrolls on the other slide as well!! I want them to be separated…
Any help with that?!

enter link description here

11

Odd, I’m noticing that too. It seems to happen when I use mouse scrolling, but not when I actually drag to scroll…

Hmm, let me look into this more

12

Yeah its only when you use a mouse to scroll,

But when you drag to scroll, its fine.

13

This is great. Is there anyway to get two panes scrolling vertically side by side rather than one on top of the other?

14

Solved it. http://codepen.io/Marvin1/pen/LzcsH