[英]Remove padding from inside ion-item - Ionic 2 AngularJS 2
Here's my scss
file: 这是我的
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;
}
}
and this is my html
file: 这是我的
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>
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. 奇怪的是,scss文件中的padding设置为0!important仅删除了离子项左侧的填充,使填充保持在顶部和右侧。
Edit 编辑
scss
: scss
:
page-home { 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
: 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>
Use this code: 使用此代码:
.label {
margin: 0;
}
.item-inner {
padding-right: 0px!important;
}
This worked for me in Ionic 4 (I know the question was for Ionic 2) 这在Ionic 4中适用于我(我知道这个问题适用于Ionic 2)
ion-item {
--ion-safe-area-right: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.