Just making Horizontal scroll

ionic-v1
1

I am new to ionic and html. I guess this is a very stupid question. But I could not find out which part of my code goes wrong.

I read few horizontal scroll example. Most likely the things need to do are

  1. ion-scroll
  2. direction=“x”

I guess there would be some more tricks to make the horizontal scroll.

Currently the images is loading in vertically. And of cause it is clip to bounds by the ion-scroll block.

here is the html I wrote.

<ion-view title={{navTitle}} ng-controller="ProductDetailCtrl">

   <ion-content class="has-header">
   <ion-scroll paging="true" zooming="false" direction="x" style="width: 100%; height: 300px;" disable-side-menu>
     <div style="width:200px; height:200px; margin 0px; display:inline-block;" ng-repeat="img in product.images">
       <img src="{{img.mediumURL}}" />
     </div>
   </ion-scroll>

   <div>
     {{product.name}}
   </div>
   </ion-content>

 </ion-view>

Any one has advice on what I am missing?

Many thanks.

2

Hey,

not sure, but looks to me you want to be wrapping your scroll and remove the width element like

<ion-scroll paging="true" zooming="false" direction="x" disable-side-menu>
<div id="wrapper"  style="height: 300px;">
    <div style="width:200px; height:200px; margin 0px; display:inline-block; float:left" ng-repeat="img in product.images">
       <img src="{{img.mediumURL}}" />
   </div>
</div>
</ion-scroll>

Not 100% sure but it works for me :slight_smile:

3

Thank you so much, it seems the wrapper do the tricks. I guess this is a really simple html question instead of ionic.