Scrolling horizontally in list item

ionic-v1
1

I really want a bunch of profile pics to scroll sideways like tinder’s shared friends/interests.

I tried setting a “.scroll-row” class with overflow:scroll and “.scroll-row .col” that have a fixed width of 76px, but they still wrap.

Any suggestions?

2

Hey Adam,

The current scroll system supports horizontal scrolling, but it’s not configurable yet. I am working on new scroll stuff for this week, so this will be in there if you can just wait a few more days :smile:

As for making overflow work now, you could try something like this: http://jsfiddle.net/w5w64/

3

Here is my code for making scrolling work horizontally.

It works great on desktop. Unfortunately, I can’t get it to scroll at all on iOS. Anyone have a way to scroll this on an actual device?

<ul class="family-icon-scroller">
    <li class="family-icon"><img ng-src="images/face-icons/face-crying.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-angry.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-asleep.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-confused.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-angel.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-devil-grin.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-embarrassed.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-foot-in-mouth.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-gearhead-female-smile.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-gearhead-male-smile.png" /></li>
    <li class="family-icon"><img ng-src="images/face-icons/face-glasses.png" /></li>

</ul>

.family-icon-scroller {
    height: 87px;
    -webkit-overflow-scrolling: touch;
    padding: 15px 15px 12px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    list-style: none;
}

.family-icon {
    display: inline-block;
    vertical-align: top;
    height: 50px;
    white-space: normal;
    margin: 0 10px
}
4

Hi @Calendee, from the ionic weather example:

<scroll direction="x">
</scroll>

Hope this helps :slight_smile:

4 Likes
5

Tada! Thanks so much @xAlien95 , that did the trick.

6

Hey guys, It works fine but have you also tried using side-menus & pane and within sub view? It does not work when inside pane.

7

Hi guys,

Its not working inside a ion-list. See http://codepen.io/anon/pen/daAyx/right/

Can anyone help me?

8

Seems to be working for me in Chrome and Canary :

9

Hi @Max did you developed a solution for horizontal scrolling support ?

10

Hey Calendee i want i want Horizontal Scrolling but at the time of scrolling data are coming in bottom but i want to align aa the details in a single line