Ionic 4 - how to reduce height of ion-list item

user_3454025 0
Viewed 13493

I have an ion-list in the header of my side-menu but i am unable to reduce the spacing of the items. You can see in the pic where i am trying to reduce:

list item spacing

the list code is:

<ion-list class="sidemenu-header-list" inset=true lines="none">
  <ion-item color="secondary">
    <h2>{{name}}</h2>
  </ion-item>

  <ion-item color="secondary" class="ion-no-padding" *ngIf="school">
    <ion-label style="font-size: 14px" text-wrap innerHTML={{school}}></ion-label>
    <ion-icon size="small" name="school" slot="start"></ion-icon>
  </ion-item>
  <ion-item color="secondary" class="ion-no-padding"*ngIf="year">
    <ion-label style="font-size: 14px" >{{year | translate}}</ion-label>
    <ion-icon size="small" name="calendar" slot="start"></ion-icon>
  </ion-item>

</ion-list>

I can see a size set on input-wrapper of 48px; which is what is forcing the height of my items; but can't see where i can modify this.

ionic4
2 Answers

try putting the following lines in your component scss file to modify the min-height CSS variable of ion-item components

ion-item {
    --min-height: 16px;
}

h2 {
   padding: 0px;
   margin : 0px;
 }
user_28673130

in CSS

ion-item {
    --min-height: 16px;
}

h2 {
   padding: 0px;
   margin : 0px;
 }

in Html

<ion-item class="ion-no-padding"> // Ionic 4 or 5
user_36035190
Related