Category: Mobile App Development

So today I was working on an app for a client in the healthcare industry. This client was very much big on lists in her app, so they asked me to modify the height of the list items so that more could fit on the screen. I struggled for a couple of hours to figure this one out until I stumbled onto the solution.

 

.scss

page-list {

// reduce min height restriction

   .item {

       min-height: 0.5rem;

       max-height: 8rem;

   }



   // set height of thumbnail

   .item-md ion-thumbnail ion-img,

   .item-md ion-thumbnail img,

   .item ion-thumbnail ion-img,

   .item ion-thumbnail img {

       width: 50px;

       height: 50px;

   }



   // set max height of list item

   .small-list {

       max-height: 50px;

   }



}

 

 

.html

<ion-list class="small-list" *ngFor="let category of categoriesList" no-lines>
   <ion-item (click)="openCategory($event)" text-wrap>
    <ion-thumbnail item-start>
      <img src="{{ category.icon }}">
    </ion-thumbnail>
    <h2 style="font-weight: bold;">{{ category.name }}</h2>
  </ion-item>
</ion-list>

 

 

The tricky part is that min-height property on the .item  class. By default, it is set to 4.4rem and this causes it to not work when you change the height of the items within the list item.

 

Hope this helped you out!

 

Follow @CharisTheProgrammer on YouTube, Twitter, Facebook, Instagram, Github, Stackoverflow…etc…