How to make a scrollable ion-col's in a single ion-row

user_15018688 0
Viewed 2056

Below image for reference. How can I horizontally align all my buttons and make it scroll horizontally? So all the buttons are aligned horizontally and not a single one vertically

HTML

    <!-- ITEMS (BOLLEN) VAN GESELECTEERDE AREA -->
    <ion-row scrollX="true" class="scroll-items">
      <ion-col size="3" *ngFor="let item of selectedArea.Items">
        <!-- Items -->
        <ion-button class="item-fab" (click)="selectItem(item)">
          <ion-label class="ion-text-wrap">{{
            item.Descriptions[0].Description
          }}</ion-label>
        </ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
        <ion-button>Test</ion-button>
      </ion-col>
    </ion-row>
    <!-- EINDE ITEMS -->

CSS

.scroll-items {
  justify-content: center;
  align-items: ;
  flex-wrap: nowrap;
  overflow-x: scroll !important;
  overflow-y: hidden;
}

scroll

ionic-framework angular css html
2 Answers

if you remove the size attribute from the ion-col it will adjust to the needed width. Then set the col to use display: flex and nowrap to achive what you probably wanted. Scrolling is set off by the row justify center, so i changed that to flex-start.

This works for me:

HTML

<!-- ITEMS (BOLLEN) VAN GESELECTEERDE AREA -->
<ion-row scrollX="true" class="scroll-items">
  <ion-col *ngFor="let item of selectedArea.Items">
    <!-- Items -->
    <ion-button class="item-fab" (click)="selectItem(item)">
      <ion-label class="ion-text-wrap">{{
        item.Descriptions[0].Description
      }}</ion-label>
    </ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
    <ion-button>Test</ion-button>
  </ion-col>
</ion-row>
<!-- EINDE ITEMS -->

CSS

.scroll-items {
  justify-content: flex-start; // changed
  flex-wrap: nowrap;
  overflow-x: scroll !important;
  overflow-y: hidden;
}
.scroll-items ion-col { // added
    display: flex;
    flex-wrap: nowrap;
}
user_161142390

add .scroll-items { white-space: nowrap; }

user_50387670
Related