Вот мой 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 удаляет прокладку только с левой стороны ионного элемента, сохраняя прокладку сверху и справа.
Редактировать
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>
Я считаю, что у меня была такая же проблема, как хорошо, вы можете разместить скриншот HTML код в браузере? Я считаю, что некоторые теги получают классы, которые придают этим элементам некоторый стиль. –
Поместите это в ваш .sass-файл: '.label { margin: 0 0 0 0; } 'и посмотреть, что произойдет. –
@aminarghavani, который фактически удаляет прокладку сверху и снизу. Он также уменьшил прописку с правой стороны, но есть еще некоторое пространство – Rick