Android Scroll-X issue

Ionic Framework ionic-v3
1

Hi,

I have an issue with Android and Scroll X. I have a list of news, and I have to make a x-scrollable buttons list to filter the news.

It’s working fine on iOS, but on an Android device (5.0), if I try to scroll, nothing happens. It only scrolls when I put my finger between the buttons or just below them. To me, it looks like an event is fired when the button is touched, and prevent the scroll event to get triggered.

This is my code :

<ion-scroll class="scrollable-buttons" scrollX="true">
    <button [style.background-color]="setIconColor(button.selected)" (tap)="sortBy(button)" *ngFor="let button of buttons" class="sort-button" ion-button>{{button.name}}</button>
</ion-scroll>
<!-- news list -->

css :

 .scrollable-buttons{
	white-space: nowrap;
	height: 70px;
	width:100%;
}

.sort-button{
    background: grey;
    border-radius: 40px;
    padding: 15px;
    color: white;
    height: 30px;
    margin-top: 20px;
    margin-left: 10px;
}

Info :

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

(same issue with Ionic 2.1.0)

Thanks !

2

Try maybe not using buttons ?

Like

<div tappable (click)="sortBy(button)">{{button.name}}</button>
3

I had the same idea. The problem is, with div, the blocks are not displayed side by side. I could probably do that, but it would need some extra css, and I’d like to avoid it. I tried with ion-badge, same issue. I’d really like to keep using buttons :worried:

4

Maybe then another button even? Or something with e.preventDefault() ?

Otherwise sorry don’t know, in my scrollX I solved it like described above with that couple of extra css

5

Thanks, I’ll try with preventDefault, if it doesn’t work, I’ll try with css. I’d like to avoid it because it looks like a workaround to me (and I suck at css).

Thanks for your answer, if somebody else has an idea, that would be great !

1 Like
6

I was able to keep buttons and find a solution. It took me almost two hours to find out, but the issue is solved by adding “touch-action: initial !important;” css property to the button.

3 Likes
7

Congrats, well done!

1 Like
8

Thank you so much for sharing. You saved me hours!