Strange Horizontal Scroll Behavior


New to Ionic, and loving it, but just wondering if this is a known ‘feature’. More information is below the problem if it’s needed.

Problem: Horizontal scroll only seems to work in a web browser, and only if I use the right mouse button, or if the side menu drag is disabled. Using the left mouse button or drag gesture on a phone results in micro movement (thought still movement eventually).

Doing a project that involves a dynamically generated <table> of players, sorted and ranked. This is currently stored in a double array. Each rank is it’s own row <tr ng-repeat="rankArray in tempPlayerArray"> and each player has it’s own cell <td ng-repeat="player in rankArray">. Ties can happen, so if there happen to be a lot of people in a single rank, then the people will overflow off the screen. I’d like to be able to scroll over there if desired. There are no issues with Y scrolling. But no X movement was happening despite <ion-content direction='xy'  > being the first thing after <ion-view title="Round Results" >. In frustration I accidentally right clicked, and Voila~ the X scroll worked just as well as the Y scroll usually does.

Upon further digging I found that the left-side-menu may be whats interfering here. I have a toggle to turn off the drag gesture, and when that is disabled, horizontal scrolling works again. Is there anyway for me to fine tune this behavior more? I’d much prefer horizontal scroll to always work on this page with a left click/drag, regardless of sidemenu drag status.


Hacked up a quick Plunker to demonstrate my problem better than I’m explaining it… hopefully I’m sharing it right.

Horizontal scroll fails unless you use the right mouse button, or click the button up top to disable the side menu drag. Plunker Link!

So how can I tweak this behavior so that I can horizontal scroll whenever I like?


Guess I figured it out on my own. Or at least a work around. It would seem whatever ‘drag area’ the two components had would overlap, and the side menu took precedence. I added an edge-drag-threshold to the side menu content tag, that activates when I’m on the single page that requires horizontal scrolls, and it is at least usable now.

Thanks for dealing with my spam.