Ion-list in side-menu-content is not scrolling

ionic-v1
1

First off, let me show the html structure for my app’s main view:

<body ng-app="bafafa" ng-controller="Ctrl">
  <ion-pane>
  ...
    <ion-side-menus style="top: 88px;">
      <ion-side-menu-content drag-content="true" edge-drag-threshold="false">
        <ion-list can-swipe="true" >
          <ion-item ng-repeat="event in eventsResult">
            <div style="float:left">{{event.name}}</div>
            <div style="float:right">{{event.date | date: 'dd/MM'}}</div>
          </ion-item>
        </ion-list>
      </ion-side-menu-content>
      <ion-side-menu side="left" width="200" >
        <ion-list>
          ...
        </ion-list>   
      </ion-side-menu>
    </ion-side-menus>
  </ion-pane>
</body>

Now, the problem I have is that the list in the does not scroll, even when there are more items than would fit on the screen. When testing in the browser with ionic serve, the scrollwheel does nothing. When testing on my phone (android 4.2) or Google Chrome’s phone spoofing system, dragging the list up or down to scroll also does nothing. I haven’t found a way to scroll the list at all. What am I doing wrong?

2

Hi @MateusLST, unfortunately the css attribute float breaks the scroll structure.
If an element is ‘floating’, at start rendering his parent won’t have the child’s height inside and the Ionic scroll needs to know his height to work.

Try resizing your browser window, you’ll notice the scroll will work as expected.
So to solve your problem you need to do one of the following actions:

  • update the scroll element, or…
  • avoid use of float attribute and use margin-left:auto and margin-right:auto instead.

I prefer to use the second one 'cause float and clear give problems also in other html5 environments.

3

Thanks @xAlien95. I changed all instances of float to margin-left or margin-right, but still, the scroll won’t work. Are there other CSS atributes that cause problems with scrolling? I’m using "position: absolute; right: 0.5%; top: 5%" for a button in my header, and the ion-side-menus element has "top: 88px".

Besides that, the only other times I changed CSS styling manually was with float, and I’ve changed all of those as you recommended.

4

If you can, could you post a codepen?
It’s hard to find the problem without having it under hands.

Side question: does the scroll works if you resize the window? Maybe the problem could be another.

5

ionPane is a container type that does not enable scrolling. Remove it from wrapping your ionSideMenus and put an ionContent inside of the ionSideMenu before your ionList.

Also the scrollwheel doesn’t work because you have to tap and drag to scroll (JavaScript scrolling). That is default behavior.

2 Likes
6

It took me a while to work out how to put an ionic project in codepen, but here goes the code as it was after @xAlien95’s suggestions: http://codepen.io/anon/pen/OPbBxO (with some stuff irrelevant to my problem removed, for readability)

I read @gnomeontherun’s suggestion and it worked! In fact, it actually is working with the scrollwheel on the browser too, but that’s not important, as the app is going to be exclusively for mobile anyway.

Thank you all for the help.

7

Interesting, I have a track pad and 2 finger swipe scrolling doesn’t work in the browser but good to know the scroll wheel does work!