2017-01-19 7 views
2

はここに私のscssファイルです:イオンのアイテムの中からパディングを削除 - イオン2 AngularJS 2

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> 

不思議なこと、パディングが0に設定! scssファイル内の重要なは、イオンアイテムの左側でのみパッディングを削除し、パッディングを上部と右側に保ちます。

enter image description here

編集

scss

{

.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> 
+0

私は、あなたは、ブラウザでのHTMLコードのスクリーンショットを投稿することができ、私はaswell同じ問題を抱えていたと考えていますか?私は、特定のタグは、それらの要素にスタイリングを与えるクラスを取得すると信じています。 –

+0

これをあなたの.sassファイルに入れます: '.label { margin:0 0 0 0; } '、何が起こるかを見てください。 –

+0

@aminarghavaniは実際には上下のパッドを削除します。それはまた右側のパディングを減らしましたが、まだスペースがあります – Rick

答えて

4

使用このコード:

.label { 
    margin: 0; 
} 

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

Perfect!どうもありがとう ;) – Rick