CODEWITHSUNDEEP
onsen-ui
Nakket
Nakket

Reputation: 630

Is it possible to make ons-list as horizontal?

Most ons-list provided by OnsenUI are normally vertical. I wonder if it is possible to make it into horizontal. Something like a possibility to scroll from left to right.

Upvotes: 0

Views: 838

Answers (1)

Nakket
Nakket

Reputation: 630

I have figured out the solution as follows:

HTML:

<ons-list class="wrapper-album">
    <ons-list-item modifier="tappable" class="internal" ng-repeat="item in items" ng-click="onItemClick(item);">
        <img ng-src="{{item.thumb}}"></img>
    </ons-list-item>
</ons-list>

CSS:

.wrapper-album {
    width: 100%;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.internal {
    display: inline;
}

Upvotes: 2

Related Questions