Scroll 2 columns of a grid on same page, every for its own

Ionic Framework ionic-v3
1

Hi! I want 2 columns of a grid to scroll for itselfs.

In ionic 1 I turned off scrolling for the whole content and enabled scrolling for every column seperately.

But in ionic 2 I don’t know how to do that. I tried the code above and some variations, but nothing worked. In all cases the whole page was scrolling, but not a column for its own.

    <ion-content>

  <ion-grid>
    <ion-row responsive-sm>
      <ion-col width-50>

        <ion-list>
          <ion-scroll scrollX="true" style="height: 450px;" >
          <ion-item-sliding *ngFor="let item of currentItems">
            <button ion-item (click)="openItem(item)">
              <ion-avatar item-left>
                <img [src]="item.profilePic" />
              </ion-avatar>
              <h2>{{item.name}}</h2>
              <p>{{item.about}}</p>
              <ion-note item-right *ngIf="item.note">{{item.note}}</ion-note>
            </button>

            <ion-item-options>
              <button ion-button color="danger" (click)="deleteItem(item)">
                {{ 'DELETE_BUTTON' | translate }}
              </button>
            </ion-item-options>
          </ion-item-sliding>
          </ion-scroll>
        </ion-list>

      </ion-col>

      <ion-col width-50>

        <ion-list>
          <ion-item-sliding *ngFor="let item of currentItems">
            <button ion-item (click)="openItem(item)">
              <ion-avatar item-left>
                <img [src]="item.profilePic" />
              </ion-avatar>
              <h2>{{item.name}}</h2>
              <p>{{item.about}}</p>
              <ion-note item-right *ngIf="item.note">{{item.note}}</ion-note>
            </button>

            <ion-item-options>
              <button ion-button color="danger" (click)="deleteItem(item)">
                {{ 'DELETE_BUTTON' | translate }}
              </button>
            </ion-item-options>
          </ion-item-sliding>
        </ion-list>

      </ion-col>
    </ion-row>


  </ion-grid>
2

Hello @basti Did you find a solution to this. I’ve been searching a week already. I have 4 columns of lists. Left columns feeds the right, but each must scroll independently. Thank you.

3

Wow! I found it. Here is a link that helped me: http://codepen.io/anon/pen/Kpgdqo.

Example

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col>
     <ion-scroll scrollY="true" direction="xy" overflow-scroll="true">
      <ion-list>
        <button ion-item *ngFor="let author of authors" (click)="authorSelected(author.name, author.id)">
              {{ author }}
            </button>
      </ion-list>
    </ion-scroll>
    </ion-col>
    <ion-col>
     <ion-scroll scrollY="true" direction="xy" overflow-scroll="true">
      <ion-list>
        <button ion-item *ngFor="let seller of sellers" (click)="sellerSelected(sellers.name, sellers.id)">
              {{ seller }}
            </button>
      </ion-list>
    </ion-scroll>
    </ion-col>
    <ion-col>
     <ion-scroll scrollY="true" direction="xy" overflow-scroll="true">
      <ion-list>
        <button ion-item *ngFor="let location of locations " (click)="locationSelected(locations.name, locations.id)">
              {{ location}}
            </button>
      </ion-list>
    </ion-scroll>
    </ion-col>
    <ion-col>
     <ion-scroll scrollY="true" direction="xy" overflow-scroll="true">
      <ion-list>
        <button ion-item *ngFor="let volume of inventory " (click)="volumeSelected(inventory.instock, inventory.backOrder)">
              {{ volume}}
            </button>
      </ion-list>
    </ion-scroll>
    </ion-col>
  </ion-row>
</ion-content>

Then in your CSS include:

ion-scroll {
    white-space: nowrap;
     height: 600px; // better to calculate the device height and set it offsetting the bottom StatusBar or margin, etc.
}

I hope this helps

4

Sadly it didn’t work for me.
The width of the list elements is getting smaller, but nothing else changes.

5

In my 4 columns I set CSS style min-width, width and max-width using percentages (%) on ion-col, height on ion-content and ion-col offset on the display (height = innerHeight - bottomTabHeight) and hide scroll bars for each ion-col. Now, each ionic column scrolls independently. The height must be calculated because when devices flip it will be adjusted or else the ion-content (parent content) will scroll (doesn’t look and feel good) because the other columns with smaller amount will scroll up).

https://forum.ionicframework.com/t/solved-how-to-get-rid-of-the-scroll-bar/30468/3

http://stackoverflow.com/questions/35952538/how-can-i-disable-or-hide-the-scrollbar-within-an-ionic-2-ion-content

6

Hi !

Did you find your solution ?
If not, if I well understood the problem, you should try to look at ion-slides, it uses Swiper which has the parameter called freeMomentum, enabling you to have the same effect as a scrollbar :

  • freeMomentum = false (default) --> scrolling will move slide by slide
  • freeMomentum = true --> scrolling will move as much as you scroll

And so, to solve your problem, set a ion-slides element for each one of your column.

I don’t know if you want to scroll horizontally or vertically but you can set this with the parameter direction
You can find the doc very easily :

1 Like
7

Excellent @MakiChew, ion-slides works perfectly.