Menu
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:
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.
967
asked Oct 15 '19 20:10
try to add an id = 'ion-overrides' or whatever you want to call it to your body element and then in your scss change the ion-app.md [padding] . scroll-content {...} to #ion-overrides ion-app.md [padding] .
The Ionic lists usually contain items with similar data content, such as images and text. It supports several interactions, including swiping items, dragging to reorder items within the list, and deleting items. We can access the lists by using a standard <ion-list></ion-list> element.
You can either use *ngIf to completely remove the element. Refer this link. *ngIf is usually the cleanest way to completely remove it from padding, positioning, etc. The overhead isn't very high unless you put it on something with a serious amount of rendering (lots of children).
Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more.
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;
}
in CSS
ion-item {
--min-height: 16px;
}
h2 {
padding: 0px;
margin : 0px;
}
in Html
<ion-item class="ion-no-padding"> // Ionic 4 or 5
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
