Unable to scroll horizontally using ion-scroll

I created a project using following command: 

$ ionic start myApp sidemenu

I have implemented the horizontal scroll above ion-list.

Following is my markup 

<ion-scroll direction="x" class="full-width"> 
  <div class="row" >
    <div class="col horizontal-item-margin horizontal-item-padding" ng-repeat="scheduleShowObj in scheduleObjectsList"> 
     <a href="#/app/playlists/{{scheduleShowObj.nid}}">
      <div class="full-width">{{scheduleShowObj.PgmItemDateTime * 1000 | date:'HH:mm a'}}</div>
      <img src={{scheduleShowObj.Thumburl}} class="imgresize"/>
      <div class="full-width">{{scheduleShowObj.PgmTitle}}</div> 
     </a>    
    </div>
  </div> 
</ion-scroll>

And following is my CSS:

.horizontal-item-margin {
margin-left: 3%;
margin-right: 3%;
}

.horizontal-item-padding {
padding-left: 3%;
padding-right: 3%;
}

.imgresize{
width: 150px; 
height: auto;
}

.full-width{
width: 100%;
padding: 0px;
}

The problem i am facing are :

1.) I am not able to scroll horizontally.

2.) Because of padding and margin the characters of the text in div above and below img tag appears vertically.

Here are two examples showing straight html/css and then applying that to ionic.

First Brass Tacks HTML/CSS

Here is a code pen of a very basic horizontal scroll, just using plan html/css http://codepen.io/jfspencer/pen/ogZeGM

HTML

<div id="container">
   <div id="content">
      <div id="1" class="box">stuff</div>
      <div id="2" class="box">more</div>
      <div id="3" class="box">to</div>
      <div id="4" class="box">Find</div>
      <div id="5" class="box">Here</div>
   </div>
</div>

CSS

#container{
  overflow-x:scroll;
  height: 80px; 
  width:400px;
}
#content{
   overflow-x:scroll; /* when content is wider than container scrolling will occur on the x axis */
   width:1200px; /* this creates the overflow area in the container */
}
.item{
   /*option a: create block elements and float them left*/
   display:block;  float:left;

   /*option b: use inline elements (or force inline elements)*/
   display: inline;
}

The basic idea is this: - create an element that has some dimensions. The width must be smaller than the element placed inside of it. This inner element that is overflowing allows for a scrollable region along with the css overflow:scroll and its variations.

  • create another element inside the first one and make its width larger than its parent.

  • apply overflow:scroll to the outer element. The outer element is the one that has content that is larger that it can hold. so one way to handle that overflow is to create a scroll in the needed direction, in this case horizontally.

Second Applying this to <ion-scroll>

Everything is the same, expect a couple things are pre-packaged : see this code pen http://codepen.io/jfspencer/pen/JoWqmQ

HTML

<ion-content id="container">
   <ion-scroll id="ionScrollRegion" direction="x">
      <div id="overflowingContent">
         <div class="item" ng-repeat="item in items">{{item.data}}</div>
      </div>
   </ion-scroll>
</ion-content>

CSS

#overflowingContent{
  width: -webkit-max-content;
  width: max-content;
}

.item{
  display:block;
  float:left;
}
  • <ion-scroll> correlates with the container in the simple example. The only difference is the direction attribute. since we know we want to scroll, overflow:scroll is a given, all we need to specify are the directions. x, y, or xy. See the docs for all the other options.
  • content is the same as before, again with one more optimization. since the stuff in the content div is likely to be variable, we can apply max-content to the content div's width property, which calculates the total width for us. There are other ways to do this as well.
  • The repeated items in the content on div so there is no need to assign display:block since divs default to this. So all that is needed is to apply float:left to get the items side by side.
  • <ion-content> does play a role, in that your initial width will be the size of the given screen. <ion-scroll> inherits that width.