Horizontal avatars scroll inside a list


#1

I have a list of items and each item holds an array of users:

<ion-list item-left>
  <ion-item *ngFor="let item of items;">
      <ion-label>
        {{ item.name }}
      </ion-label>
  </ion-item>
</ion-list>

I am trying to add a horizontal avatars scroll to every item in the list

<ion-list item-left>
  <ion-item *ngFor="let item of items;">
      <ion-label>
        {{ item.name }}
        <br> 
        <ion-scroll scrollx="true" style="height: 50px;">
          <ion-avatar *ngFor="let user of getAllUsers(item)">
            <img src="{{ user.avatar }}" style="max-width:2.5rem;max-height:2.5rem;">
          </ion-avatar>
        </ion-scroll>
      </ion-label>
  </ion-item>
</ion-list>

Before I added style="height: 50px;" to ion-scroll nothing changed. After this addition the avatars are here but they are one bellow the other and not in a one row (and of course without horizontal scrolling).

How can I fix that?

P.S Is it possible to add width to the scroller? I don’t want it to take the whole page width.


Horizontal sliding scroll effect is not working in ion-scroll container using ionic 3.9.2 version
#2

Any ideas guys? :map:


#3

Well, After some tries I managed to achieve this avatar scroll with the following code:

<ion-row>
  <ion-avatar *ngFor="let user of getAllUsers()">
    <img src="{{ user.avatar }}" style="max-width:2.5rem;max-height:2.5rem;">
  </ion-avatar>
  <h1> {{ getAllUsers().length }} </h1>
</ion-row>

Plus this style:

ion-row {
  white-space: nowrap;
  width: 50px;
  overflow-x: auto !important;
}`

#4

I achieved the horizontal scroll with several ionic components:

ion-avatar scrollable HTML

<ion-content>
<ion-row>
    <ion-item no-lines>
    <ion-scroll scrollX="true" scroll-avatar>
        <ion-avatar>
          <img src="../../assets/whatever.png" *ngFor="let avatar of avatars" class="scroll-item"/>
        </ion-avatar>
    </ion-scroll>
    </ion-item>
  </ion-row>
</ion-content>

ion-icon scrollable HTML

<ion-content>
  <ion-row>
    <ion-item no-lines>
      <ion-scroll scrollX="true">
        <ion-icon *ngFor="let avatar of avatars" name="radio-button-on" class="scroll-item selectable-icon"></ion-icon>
      </ion-scroll>
    </ion-item>
  </ion-row>
</ion-content>

SCSS

  ion-scroll[scrollX] {
    white-space: nowrap;
    height: 120px;
    overflow: hidden;

    .scroll-item {
      display: inline-block;
    }

    .selectable-icon{
      margin: 10px 20px 10px 20px;
      color: red;
      font-size: 100px;
    }

    ion-avatar img{
      margin: 10px;
    }
  }

  ion-scroll[scroll-avatar]{
    height: 60px;
  }

  /* Hide ion-content scrollbar */
  ::-webkit-scrollbar{
    display:none;
  }

That worked for me with ionic 3.2.0 version.


Creating horizontal scroll contents in ionic
#5

Thank you dude, it worked!


#6

How to add label in avatar?


#7

It doesn’t working for me. I am using ionic 3.20.0.
I have raised a question @ https://stackoverflow.com/questions/50443881/click-and-sliding-effect-is-not-working-in-ion-scroll-container-using-ionic-3-9

Please refer above link to get complete issue and code details and then let me know if any luck.

I’m breaking my head since last week to fix this but still no luck.

Thanks in advance!


#9

how to add icons inside avatar?