Ion-list alignment

Ionic Framework Ionic Vue
#1

CSS-Question-png
CSS-Question-png1440×860 209 KB

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

#2

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
#3

No luck. I placed it in /src/theme/variables.css and the component the features the ion-item.

#4

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
#5

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