How to change the height of ion-list ion-items in Ionic Framework

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…

Push Notifications in Your Ionic Mobile App with OneSignal

Introduction to push notifications, what they are, how they work

Push notifications are messages sent directly to your app’s users. They notify users of new content, even when the user is not using your application. They increase user engagement and retention in your app. An example is the WhatsApp “whistle” that notifies you of new messages received. In this tutorial, we’ll dive into integrating push notifications into your Ionic app using OneSignal.

How push notifications work

A push notification is sent from the Push notification platform of the mobile OS: Apple’s Push Notification Service for iOS and Google Cloud Messaging for Android. These push notification services relay the message to the devices that have subscribed to them.

This means that you need to keep track of all the devices that have subscribed for push notifications. But there are some great services out there to simplify the process. One such service is OneSignal.

Read More – https://www.sitepoint.com/push-notifications-in-your-ionic-app-with-onesignal/