Ion-list inside a grid col has no height

@donniekerr wrote:

I have a child list component inside a column in a grid. The list has no height. I want it to full the full height of the page.

The ion-content inside the child seems to have no height. The list itself is still there and has height. If I remove the child ion-content, the list appears ok, but I assume it won’t be scrollable on smaller devices.

What is the recommended best practice for nesting components to get full width and height of parent containers?

Thanks,
Donnie

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col col-4>
        <list-sections></list-sections>
      </ion-col>
      <ion-col col-4>

      </ion-col>
      <ion-col col-4>

      </ion-col>
    </ion-row>
    
  </ion-grid>
</ion-content>

<ion-content>

  <ion-list> 
    <button ion-item *ngFor="let item of items">
      <ion-icon item-start></ion-icon>
      {{item.title}}
      <div class="item-note" item-end>
        {{item.note}}
      </div>
    </button>
  </ion-list>

</ion-content>

Posts: 1

Participants: 1

Read full topic