Two Lists side by side

1

Hi!
I want two or more lists side by side. each one should be individual scrollable like tweetdeck.
Tried

<ion-content overflow-scroll=true overflow-x: scroll overflow-y: hidden>
  <ion-content left:0 width:300 overflow-scroll=true float:left top:0px bottom:0px>
    <ion-list>some items</ion-list>
  </ion-content>
  <ion-content left:300 width:300 overflow-scroll=true float:left top:0px bottom:0px>
    <ion-list>some items</ion-list>
  </ion-content>
  <ion-content left:600 width:300 overflow-scroll=true float:left top:0px bottom:0px>
    <ion-list>some items</ion-list>
  </ion-content>
</ion-content>

but i cant scroll horizontal trough the lists on the android
But works great on desktop:

2

Have you tried wrapping them in <ion-scroll> ?

1 Like
3

Doesnt work. But i’ve build a directive where i can $swipe to each list horizontal. Im animating margin-left of the outer

<ion-content overflow-scroll=true overflow-x: scroll overflow-y: hidden margin-left: 0px class="hslider" >

not final, but works nice so far : ) (but i have to deactivate it on the desktop-version)

.directive('hslider', function($swipe){
'use strict';
 return {
    restrict: 'C',
    link: function(scope, ele, attrs, ctrl) {
    	var startX, pointX, outerContentWidth, marginleft;
    	marginleft = 0;
    	$swipe.bind(ele, {
    		'start': function(coords) {
    			startX = coords.x;
    		},
    		'end': function(coords) {
    			pointX = coords.x;
    			if(Math.abs(startX - pointX) < 50) {
    				return;
    			}
                        outerContentWidth = $(ele).width();
    			if(pointX < startX) {
                        //todo: return if you are on the last list (rightmost)
    				marginleft = marginleft - 300;
    				if(marginleft <= -outerContentWidth) {
    					marginleft = -holderwidth + 300;
    				}
    				$(ele).css("margin-left", marginleft);
    			}
    			else {
    				marginleft = marginleft + 300
    				if(marginleft >= 0){
    					marginleft = 0;
    				}
    				$(ele).css("margin-left", marginleft);
    			}
    			startX = coords.x;
    		  }
    	   });
       }
   }
})