ion-scroll horizontal scroll not working on Android & Browser

[ionitron-bot[bot]]

Original issue by @ernofi on 2016-12-22T11:39:40Z

Ionic version: (check one with "x") [ ] 1.x [X] 2.x

I'm submitting a ... (check one with "x") [X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: I have the following code in my app:

<ion-scroll scrollX="true" id="lines">
        <div class="line" *ngFor="let line of lines" (tap)="selectLine(line)">{{ line }}</div>
</ion-scroll>

It should allow to scroll horizontally but it's not working on Android. With iOS everything goes fine.

It generates the following HTML: touch-action: pan-y;

<div class="line" style="touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 10</div>

Expected behavior: It should generate: touch-action: pan-x;

<div class="line" style="touch-action: pan-x; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 10</div>

Ionic info:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.48
ios-deploy version: 1.9.0 
ios-sim version: 5.0.8 
OS: macOS Sierra
Node Version: v5.8.0
Xcode version: Xcode 8.2 Build version 8C38

[bhumin3i]

any update?

[trithesh]

I'm using ion-scroll> ion-avatar, avatars are getting vertically instead of horizontally anyone has atleast temporary solutions

[bhandaribhumin]

<ion-scroll scrollX="true" style="width:100%" class="headerChip" #test>
    <ion-row nowrap class="headerChip">
      <div
        *ngFor="let article of articleList?.articles; let i = index"
        class="headerChipGray"
      >
         <div class="card" (click)="openArticle(article)">
    <div class="article-image-container">
      <img-loader [src]="(article?.image | secure | async) || 'assets/img/loader/loader.gif'" useImg></img-loader>
    </div>
    <div class="container">
      <span [hidden]="article?.isRead" class="unread-article-indicator">
      </span>
      <div>
        <span class="article-date">{{ article?.publishDate | date:long }}</span>
      </div>
      <div class="ion-card-title" [ngClass]="!article?.isRead ? 'pl1':''" [innerHTML]="article?.title"> </div>
      <div class="article-details" [ngClass]="!article?.isRead ? 'pl1':''"
        [innerHTML]="(article?.content | slice:0:70)">
      </div>
    </div>
      </div>
    </ion-row>
  </ion-scroll>

css

  ion-scroll[scrollX] {
    white-space: nowrap;
    height: auto;
    min-height: 250px;

    .article-date {
      font-size: 1.2rem;
      color: color($colors, title-grey);
    }

    .ion-card-title {
      width: 180px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: color($colors, direction) !important;
      padding: 0px;
      font-size: 16px;
      -webkit-text-fill-color: color($colors, direction) !important;
      -webkit-text-stroke-width: 0.5px;
      -webkit-text-stroke-color: color($colors, direction) !important;
    }

    .article-details {
      padding: 0;
      white-space: normal;
      overflow: hidden;
      width: 180px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      color: lightslategray;
      margin-bottom: 5px;
    }

    .article-image-container {
      img {
        height: 120px !important;
        min-height: 120px !important;
        width: 200px;
      }
    }
  }

.card {
    // box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    width: 200px;
    border-radius: 5px;
    margin: 5px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s linear 0s;
    background: #ffffff;
  }

  img {
    border-radius: 5px 5px 0 0;
  }

  .container {
    padding: 2px 12px;
    height: 105px;
    min-height: 105px;

  }

[trithesh]

I'm using ion-scroll> ion-avatar, avatars are getting vertically instead of horizontally anyone has atleast temporary solutions

https://ionic-pppwor.stackblitz.io - for preview of image displaying.

[bhandaribhumin]

@trithesh https://forum.ionicframework.com/t/horizontal-avatars-scroll-inside-a-list/82473/4

[trithesh]

@bhandaribhumin no, it is not working if you want to see live, go to about>contact to see in action

[bhandaribhumin]

@trithesh your repo is updated now please check : https://stackblitz.com/edit/ionic-mttjzx

other example for you 👍 DEMO [EDIT] (https://stackblitz.com/edit/ionic-calendar-scheduler-kpcgbj) check about us page

[trithesh]

Getting this error in this project

On Fri, 13 Sep 2019, 1:12 pm Bhumin Bhandari, notifications@github.com wrote:

@trithesh https://github.com/trithesh https://stackblitz.com/edit/ionic-calendar-scheduler-kpcgbj?file=pages%2Fhome%2Fhome.ts check about us page

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic-v3/issues/155?email_source=notifications&email_token=AHKTE4GGYQ6XCGHDE7YJ33LQJM77XA5CNFSM4GHCC532YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD6UHXDA#issuecomment-531135372, or mute the thread https://github.com/notifications/unsubscribe-auth/AHKTE4HDTUFU7ESLTCLZ2S3QJM77XANCNFSM4GHCC53Q .

[bhandaribhumin]

@trithesh please copy and paste css and html context