2017-01-19 4 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 код в браузере? Я считаю, что некоторые теги получают классы, которые придают этим элементам некоторый стиль. –

+0

Поместите это в ваш .sass-файл: '.label { margin: 0 0 0 0; } 'и посмотреть, что произойдет. –

+0

@aminarghavani, который фактически удаляет прокладку сверху и снизу. Он также уменьшил прописку с правой стороны, но есть еще некоторое пространство – Rick

ответ

4

Используйте этот код:

.label { 
    margin: 0; 
} 

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

Perfect! Большое спасибо ;) – Rick

Смежные вопросы