Ion-content displaying with 0 height?

Hello guys!

Today i went back to my side hustle projects and back to coding with Ionic, but after some tries I couldnt find a way to make it work , the thing i’m trying to achieve is to display a list and make it scrollable also clickable. I’m trying to do this with the following code:

<div id="listado-universal">
  <lib-header-principal [nombreHeader]="_nombreHeader"></lib-header-principal>
  <div class="progress-wrapper" *ngIf="_progressParams">
    <div class="progress">
        class="{{ _progressParams.className }}"
        attr.aria-valuenow="{{ _progressParams.nowValue }}"
        attr.aria-valuemin="{{ _progressParams.minValue }}"
        attr.aria-valuemax="{{ _progressParams.maxValue }}"
        [ngStyle]="{ width: _progressParams.nowValue + '%' }"
  <ion-searchbar debounce="500" animated (change)="aplicandoFiltro($event)"></ion-searchbar>

    <ion-item *ngFor="let item of _listaItems" (click)="emitirValor(item)">
      <ion-avatar slot="start">
        <img [src]="item.avatarURL" *ngIf="item.avatarURL.length > 0; else avatarTexto" />
        <ng-template #avatarTexto>
          <ngx-avatar name="{{ item.mainLabel }}"></ngx-avatar>
      <ion-label>{{ item.mainLabel }}</ion-label>

This is my component which is located in my angular library. Everything works great until i wrap my list with the ion-content which is needed to make my list scrollable. When I do this , my list dissapears. I analyzed the dom and it appears that the ion-content height is going to 0px , if i change it’s height to any size it will display and work as intented , but its not the proper way.

I saw for example, in my app.component located on the src, that there is also a list , wrapped by a ion-content element too , and it works as intended, perfectly and also is responsive. When I compare my list to this one there is no difference, I ’ cant understand why the ion-content is hiding my list and it’s content =/

The mentioned app.component.html contains the following:

  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
                {{ p.title }}
    <ion-router-outlet id="main-content"></ion-router-outlet>

Ionic is very opinionated and particular about template structure. I have found that I get consistently better results the less I deviate from the structure in the documentation and/or the conference app. So I suspect your listado-universal <div> is causing the problems, and would focus my efforts on a way to do whatever you’re trying to achieve within the confines of only having <ion- elements at top level.

Thanks :slight_smile: I will try these days and I will tell you