Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic 4 horizontal scroll with ngFor

I'm at a loss. I can get horizontal scroll to work fine with just html and css but when i introduce ngFor, it refuses to produce the same effect.. Does anyone have experience with this, or know how to solve the issue?

here is my simple code that does not work:

this example yields a vertical list:

<div class="container" *ngFor="let item of items | async">
        <div class="scroll" scrollX="true">
         <span>{{item.ProjectEvent}}</span>
        </div>
    </div>

And this one yields a wide container that scrolls horizontally

 <div class="container" >
        <div class="scroll" scrollX="true">
            <span>item1</span>
            <span>item2</span>
            <span>item3</span>
            <span>item4</span>
            <span>item5</span>
            <span>item6</span>
            <span>item7</span>
            <span>item8</span>
            <span>item9</span>
        </div>
    </div>

And the same css for both:

.container {
  width: 100px;
  background-color: green;
  overflow: hidden; 
  white-space: nowrap;
  ::-webkit-scrollbar {
    display: none;
  }
  .scroll {
    overflow: auto;
  }
}

Explain that one to me Mr. Spock!

Thanks for the help in advance!

Dependencies for good measure:

"dependencies": {
    "@angular/common": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/router": "^7.1.4",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "4.0.0",
    "@ionic/pro": "2.0.4",
    "core-js": "^2.5.4",
    "firebase": "^5.8.0",
    "ngx-navigation-with-data": "^1.0.2",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
like image 238
MacD Avatar asked Jan 29 '19 03:01

MacD


3 Answers

Try using the directive on the actual element that needs to get replicated:

<div class="container">
    <div class="scroll" scrollX="true">
        <span *ngFor="let item of items | async">{{item.ProjectEvent}}</span>
    </div>
</div>
like image 198
Sergey Rudenko Avatar answered Oct 21 '22 01:10

Sergey Rudenko


Using flexbox:

div[scrollx=true] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  &::-webkit-scrollbar {
     display: none;
  }
   .scroll-item {
     flex: 0 0 auto;
  }
}

https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6

like image 9
Troy Michael Avatar answered Oct 21 '22 00:10

Troy Michael


Maybe try it

<ion-segment scrollable="true">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
</ion-segment>
like image 3
Wen Yi Xue Avatar answered Oct 21 '22 00:10

Wen Yi Xue