bug: Can't modify spacing of ion-item

Bug Report

Ionic version: [x] 4.7.

Current behavior: I am simply trying to reduce the spacing of the items in this ion-list: Spent far too many hours reading tutorials on shadow dom and trying various variables. Nothing has worked (although i am able to make it bigger).

Google has returned numerous posts with people complaining about the same issue; with no solutions. After this much time i have to assume this is a bug.

And if not a bug… certainly far too difficult to make this simple modification.

I can likely accomplish what i am trying to do by not using an ion-list and just using std html components; but it is so close and easy to get this close - it seems hard to believe it can’t be tweaked a few pixels.

Expected behavior: the same list with slightly smaller spacing

Steps to reproduce:

Related code:

  <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}}</ion-label>
         <ion-icon size="small" name="calendar" slot="start"></ion-icon>
       </ion-item>

     </ion-list>

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.5 (C:\Users\Peter\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.7.4
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   Capacitor CLI   : 1.0.0-beta.24
   @capacitor/core : 1.0.0-beta.24

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 8 other plugins)

Utility:

   cordova-res : 0.3.0
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (C:\android-sdk)
   NodeJS            : v10.13.0 (D:\Program Files\nodejs\node.exe)
   npm               : 6.11.3
   OS                : Windows 7

[liquidcms]

Hi Brandy, thanks as always… that does the (painful) trick. Your suggestion reduces overall line height to 33px (from 48) - which is the size of the icon.

i’ll need to tweak a little to center icon with text and prevent text from getting clipped - but this has fixed my issue.

Thank you and sorry for reporting this as a bug.

And thanks Liam for looking at this. I had most of a demo repo put together when Brandy posted.

[liamdebeasi]

Thanks for the issue. These components are designed to match the iOS/MD spec by default so it’s likely you will need to customize some of the margin/padding yourself. You should be able to adjust the margins on ion-label and possibly the padding on ion-icon.

Can you try that and let me know if it resolves your issue?