I tried to adjust the CSS on the ion-item component, ion-list component, and the app component.
ion-content {
align-content: flex-start;
text-align: left;
–padding-bottom: 0px;
–padding-end: 0px;
–padding-start: 0px;
–padding-top: 0px;
}
ion-page {
align-content: flex-start;
text-align: left;
–padding-bottom: 0px;
–padding-end: 0px;
–padding-start: 0px;
–padding-top: 0px;
}
ion-list {
align-content: flex-start;
text-align: left;
–padding-bottom: 0px;
–padding-end: 0px;
–padding-start: 0px;
–padding-top: 0px;
}
The padding on the item is applied to the ion-item component itself, so setting the padding on ion-list or ion-content will not do anything. Instead you need to set --padding-start: 0px on ion-item:
ion-item {
--padding-start: 0px;
}
See the CSS Variables on ion-item here: ion-item: Ionic Framework API Docs
1 Like
No luck. I placed it in /src/theme/variables.css and the component the features the ion-item.
i Think you need to use --inner-padding-start: 0px instead of --padding-start:0px
From the Documentation Link here
--inner-border-width Width of the item inner border
--inner-box-shadow Box shadow of the item inner
--inner-padding-bottom Bottom padding of the item inner
--inner-padding-end Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner
--inner-padding-start Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner
--inner-padding-top Top padding of the item inner
1 Like
After looking into the code it seems that problem is with ul which has padding set on it you can ignor / remove the paddings from <ion-list> & <ion-item> and just keep the padding via custom class on ul that should / will slove the problem
1 Like
