Remove padding from inside ion-item - Ionic 2 AngularJS 2

Question

Here's my scss file:

page-home {

    .scroll-content{
        padding: 8px;
    }

    ::-webkit-scrollbar,
    *::-webkit-scrollbar {
        display: none;
    }

    .item {
        border: solid #dddddd;
        border-radius: 2px;
        border-width: 1.5px;
        padding: 0 !important;
        margin-bottom: 8px;
    }

    img.imgmg {
        width: 100%;
        height: auto;
    }

}

and this is my html file:

<ion-header>
  <ion-navbar color="primary">
    <ion-title text-center>
      App Name
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap>
      <ion-thumbnail>
        <img class="imgmg" src="...">
      </ion-thumbnail>
      <div>...</div> 
      <h2>Text</h2>
    </ion-item>
  </ion-list>
</ion-content>

Strangely, the padding set to 0 !important in the scss file removes the padding only on the left side of the ion-item, keeping the padding at the top and right side.

Edit

scss:

page-home {

    .scroll-content{
        padding: 8px ;
    }

    .label { 
        margin: 0 0 0 0; 
    }

    ::-webkit-scrollbar,
    *::-webkit-scrollbar {
        display: none;
    }

    h2.title {
        font-size: 20px;
        margin-top: -8px;
        margin-left: 16px;
    }

    .item {
        border: solid #dddddd;
        border-radius: 2px;
        border-width: 1.5px;
        padding: 0 !important;
        margin-bottom: 8px;
    }

    div.bar {
        padding: 8px;
    }

    img.imgmg {
        width: 100%;
        height: auto;
    }

    img.ndp {
        width: 36px;
        height: 36px;
    }

    div.ndph {
        margin-left: 8px;
    }

}

html:

<ion-header>
  <ion-navbar color="primary">
    <ion-title text-center>
      App Name
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
    <ion-list>
      <ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap>
        <ion-thumbnail>
          <img class="imgmg" src="..url image..">
        </ion-thumbnail>
        <div class="bar">
          <div style="display:inline-block; vertical-align: middle;">
            <img class="ndp" src="..url image..">
          </div>
          <div style="display:inline-block; vertical-align: middle;" class="ndph">
            <p><strong><font color="#343434">Text</font></strong></p>
            <p>Text</p>
          </div>
        </div> 
      <h2 class="title">Title text</h2>
    </ion-item>
  </ion-list>
</ion-content>

Solution 1

Use this code:

.label {
   margin: 0;
}

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

Solution 2

This worked for me in Ionic 4 (I know the question was for Ionic 2)

ion-item {
  --ion-safe-area-right: 0;
}

Comments

[langauld]

Thank you, this is just what I needed