ion-list ionic 3 I need it to always occupy 100% of the width even if it has no elements

0

friends I have little time working with ionic 3, in the front part is where I lack a lot.

If anyone knows how I can make a list, even if it has no elements always occupy 100% of the width and do not deduce its width when an element is small or there are no elements.

this is the html code:

  

<ion-input ion-text placeholder="Que Buscas..." clearInput></ion-input>
<ion-fab button right >
   <button ion-fab mini color="dark" [navPush]="login">
     <ion-icon  name="search"></ion-icon>
   </button>
 </ion-fab>

<div padding>
  <ion-segment [(ngModel)]="pet">
    <ion-segment-button value="kittens">
      Cecar de ti..
    </ion-segment-button>
    <ion-segment-button value="puppies">
      Categorias Populares
    </ion-segment-button>
  </ion-segment>
</div>

<div [ngSwitch]="pet">
  <ion-list *ngSwitchCase="'puppies'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>My Neighbor Totoro</h2>
      <p>Hayao Miyazaki • 1988</p>
      <button ion-button clear item-end>View</button>
    </ion-item>
  </ion-list>

  <ion-list *ngSwitchCase="'kittens'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>Rubysfadsasdad asad asdad asda</h2>
    </ion-item>
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    <ion-item>
      <ion-thumbnail item-start>
        <img src="../assets/imgs/usuario.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    ...
  </ion-list>
</div>

    
asked by Pedro Delgado 28.02.2018 в 20:31
source

0 answers