CODEWITHSUNDEEP
cssionic-frameworkionic2
user3561494
user3561494

Reputation: 2342

ionic2 ion-list too much padding

Too much padding on the right side of my ion list.

enter image description here

I was able to decrease padding on left side with 

padding: 0 0 0 0 !important;

But cannot find any way to affect the right side.

    <ion-list class="wrapping-list">
    <ion-item *ngFor="let listItem of list; let i = index" no-padding row-no-padding (click)="seeListItem(i)" (long-press)="longPressListItem(i)" (swipe-left)="swipeLeftItem(i)">
        <ion-avatar item-left>
            <img width="30px" height="30px" src="{{listItem.thumbnail}}" />
        </ion-avatar>
        <h2>{{ listItem.name }} </h2>
        <p>{{ listItem.summary }} </p>
    </ion-item>
</ion-list>

Here is everything I tried with CSS:

.wrapping-list .item-content, .wrapping-list .item {
overflow: initial;
white-space: initial;

padding: 0 0 0 0 !important;
}

.no-padding {
    padding: 0 0 0 0 !important;
}

.item-complex .item-content {
  padding: 0 0 0 0 !important;
}

.item-right
{
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
}

Other formatting questions:

  1. How do I get rid of the lines between items?
  2. Why is the line only under text and not picture?
  3. How can I make the second line of text (grey text) two lines with wrapping?

Upvotes: 0

Views: 971

Answers (1)

user3561494
user3561494

Reputation: 2342

To make it work I had to add this to app.scss:

.item-md.item-block .item-inner {
    padding: 0 0 0 0 !important;
}

.label-md {
    margin: 6px 8px 0px 0;
}

and create a custom css file for the page with this in it:

.item-md [item-left] {
  margin: 0px 0px 0px 4;
}

.item-md [item-right] {
  margin: 0px 0px 0px 0;
}

When I moved the stuff in app.scss to the other css file it didn't work for some reason.

Upvotes: 1

Related Questions