CODEWITHSUNDEEP
ionic4
liquidcms
liquidcms

Reputation: 321

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

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.

Upvotes: 9

Views: 18872

Answers (3)

times29
times29

Reputation: 3373

I had an IonItem like this:

<ion-item>
  <ion-badge slot="start">{{ fileCitation[0] }}</ion-badge>
  <ion-label>{{ fileCitation[1].fileName }}</ion-label>
</ion-item>

It looked like this: Screenshot of what the IonItem looked like before

To reduce the IonItem's height, I set the style="--min-height: 20px" on the <ion-item> and added the ion-no-margin class to the <ion-label>:

<ion-item style="--min-height: 20px">
  <ion-badge slot="start">{{ fileCitation[0] }}</ion-badge>
  <ion-label class="ion-no-margin">{{ fileCitation[1].fileName }}</ion-label>
</ion-item>

Result: Screenshot of what the IonItem looked like with the two additional properties

Choose a suitable height that fits your content for the --min-height :)

Upvotes: 0

Navi
Navi

Reputation: 179

in CSS

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

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

in Html

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

Upvotes: 4

Tino
Tino

Reputation: 171

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;
 }

Upvotes: 16

Related Questions