CODEWITHSUNDEEP
htmlangularjsionic-framework
Konstantin Kozirev
Konstantin Kozirev

Reputation: 1262

html element with horizontal scroll in ion-slide

I have a HTML horizontal stripe with buttons that need to be scrolled horizontally inside of <ion-slide>. (horizontal stripe contains many buttons, which user want to see. He swipes this horizontal list from right to left and next buttons appear. The problem is that when I touch horizontal list and swipe, I <ion-slide> swipped, instead of list with html buttons. How can it be changed to make buttons to move. 

<ion-slide id="categories" ng-controller="CategoriesCtrl" scrollX="false" scrollY="false">
    <ion-content scrollX="false" scrollY="false">
        <ion-list>
            <div class="category-row" ng-if="categoriesLoaded" ng-repeat="category in categories">
                <div class="category-title">
                    [[category.title]] ([[ category.programmesLength ]])
                </div>
                <div class="programmes-container">
                    <div ng-repeat="programme in category.programmes">
                        <a ng-href="#/dvr/[[ programme.id ]]" class="programme" style="background-image: url([[programme.icon]]);">
                            <img ng-src="[[ programme.channel.icon ]]" class="channel-image">
                            <div class="duration"> [[ programme.duration ]] </div>
                            <div class="content">
                                <div class="title"> [[ programme.title ]] </div>
                                <div class="time"> [[ programme.time ]] </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </ion-list>
    </ion-content>
</ion-slide>

You can see on picture: the red line represents <ion-slide> next page's border. Green boxes represent buttons. And yellow arrow represents the direction in which green boxes should be moved.

enter image description here) UPDATE: I managed to show horizontal scrollers, they are working, but swiping on boxes doesn't work. I need to swipe, by pressing on box and moving it. Below is updated image. enter image description here

Upvotes: 1

Views: 945

Answers (1)

Konstantin Kozirev
Konstantin Kozirev

Reputation: 1262

I have found solution: 

<ion-scroll direction="x" class="cat-scroller" style="overflow-x: hidden;" overflow-scroll="false">
....
</ion-scroll>

Does the job well. And also on JS side:

$ionicSlideBoxDelegate.enableSlide(false);

I put it inside .controller('..', function($scope)){//here}. This thing prevents scrolling horizontally. But also can do without it, but horizontal scroll will be difficult, but possible.

Upvotes: 1

Related Questions