[英]ionic 4 ion-col showing too much space in iphone x
I have a simple grid but the problem is its showing too much space on top of images.我有一个简单的网格,但问题是它在图像顶部显示太多空间。
html html
<ion-grid style="height: 100%">
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="6" *ngFor="let x of data" >
<ion-card class="card-img" (click)="detail()">
<img src="../../assets/img/demo.jpg" >
<div style="text-align: center;" class="boxe">
<ion-icon name="checkmark" class="tick" color="medium"></ion-icon>
<ion-icon name="close" class="cross" color="dark"></ion-icon>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
scss scss
.card-img{
border-radius: 10px;
}
.tick{
text-align:center;
font-size: 30px;
}
.cross{
text-align:center;
font-size: 30px;
}
ion-card{
margin: 0px
img{
width:100%;
}
}
.no-shadow{
box-shadow: none !important;
}
ion-row{
ion-card{
width:100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
matgin-top: 0 !important;
img{
width:100%;
}
}
}
As you can see in image i add black lines on space i need to remove this space or add little space like 4 5px.正如你在图片中看到的,我在空间上添加了黑线,我需要删除这个空间或添加像 4 5px 这样的小空间。
You just need to remove margin top and the bottom on ion-card
.您只需要删除
ion-card
上的边距顶部和底部。
Change this to:将此更改为:
ion-row{
ion-card{
width:100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
matgin-top: 0 !important;
img{
width:100%;
}
}
This:这个:
ion-row{
ion-card{
width:100% !important;
margin: 0 !important; // I also dont think important is neccesary
img{
width:100%;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.