Ion-content displaying with 0 height?

Ionic Framework ionic-v3
1

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">
      <div
        class="{{ _progressParams.className }}"
        role="progressbar"
        attr.aria-valuenow="{{ _progressParams.nowValue }}"
        attr.aria-valuemin="{{ _progressParams.minValue }}"
        attr.aria-valuemax="{{ _progressParams.maxValue }}"
        [ngStyle]="{ width: _progressParams.nowValue + '%' }"
      ></div>
    </div>
  </div>
  <ion-searchbar debounce="500" animated (change)="aplicandoFiltro($event)"></ion-searchbar>

  <ion-content> 
   <ion-list>
    <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>
        </ng-template>
      </ion-avatar>
      <ion-label>{{ item.mainLabel }}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>
</div>

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-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <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>
              <ion-label>
                {{ p.title }}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>
2

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.

4

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