How do I create a scroll for a column?


#1

I am making an Ionic grocery list app where data is populated within a ion-grid, ion-row, and ion-col. Food categories are shown in the rows and Food names are shown in the columns. Two columns exist, one for desired foods and one for undesired foods. I’d like for this column to be about 150px tall and be scrollable. In the apps current state, adding food to the database pushes food categories off the page rather than pushing food names down where they are hidden.

Here is the code:

<ion-item-group>

  <ion-item (click)="togglefoods(list.category)" *ngIf="lists[i-1]?.category != list.category" class="categoryList">
    {{list.category}}
    <ion-icon item-right name="arrow-forward" *ngIf="list.category != currentCategory"></ion-icon>
    <ion-icon item-right name="arrow-down" *ngIf="list.category == currentCategory"></ion-icon>
  </ion-item>

<div class="foodList" *ngIf="list.category == currentCategory">

    <ion-grid>
      <ion-row *ngIf="lists[i-1]?.category != list.category">
        <ion-col>
        </ion-col>
        <ion-col id="weNeedLabel">
          We Need
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col class="offFoods" [ngClass]="{'grey-out': list.state == 'on'}" (click)="additem(list)">
          {{list.foodname}}
        </ion-col>
        <ion-col  class="onFoods" [ngClass]="{'grey-out': list.state == 'off'}" (click)="unlist(list)">
          {{list.foodname}}
        </ion-col>
      </ion-row>
    </ion-grid>

</div>
</div>
</ion-item-group>

I have the following CSS:

height: 100px;
overflow: scroll;

Because each column is actually just a repeatable foodname from Firebase, column doesn’t encompass a container with all food names.
The question is, where does this CSS belong? Trial and error has gotten me hardly anywhere so far.