从离子项中删除填充物 - Ionic 2 AngularJS 2

Question

这是我的scss文件：

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

}

这是我的html文件：

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

奇怪的是，scss文件中的填充设置为 0！important 会删除仅在离子项左侧的填充，保持填充在顶部和右侧。

修改

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>

Answer 1

使用此代码：

public static class DropdownData
{
    public static IList<SelectListItem> GetTimeList(string defaultValue)
    {
        var times = new List<SelectListItem>();
        times = Enumerable.Range(4, 4).Select(x => {
            var minute = x * 15;
            var time = DateTime.Today.AddMinutes(minute);
            return new SelectListItem()
            {
                Value = minute.ToString(),
                Text = time.ToString("hh:mm tt"),
                Selected = (!string.IsNullOrEmpty(defaultValue) && minute.Equal(defaultValue))
            };
        }).ToList();
        return times;
    }
}

Answer 2

这在Ionic 4中对我有用（我知道问题是针对Ionic 2的）

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