[英]How do make Ionic 4 ion-col the same height
I have a page with a main card, which contains other small cards inside a grid.我有一个带有主卡片的页面,其中包含网格内的其他小卡片。 I want that all the col to have the same height, which will be the max height between the cols inside a specific row.我希望所有列都具有相同的高度,这将是特定行内列之间的最大高度。
This is my template and my styling:这是我的模板和样式:
<ion-card color="blue">
<ion-card-content class="welcome-card-content">
<ion-grid class="ion-no-padding">
<ion-row >
<ion-col >
<ion-card color="white-blue"class="small-card">
<ion-card-content class="white-text">
<ion-row class="ion-justify-content-center">
<ion-icon class="home-icons" name="flash"></ion-icon>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-text >a very long text that takes a lot of vertical space</ion-text>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card color="white-blue" class="small-card">
<ion-card-content class="white-text">
<ion-row class="ion-justify-content-center">
<ion-icon class="home-icons" name="add"></ion-icon>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-text >simple text</ion-text>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
Css file css文件
.small-card{
margin: 3px;
height: inherit;
}
ion-col{
margin: 0px;
padding: 0px;
height: 100%;
}
ion-row{
width: 100%;
height: auto;
}
This is my result so far:这是我到目前为止的结果:
So here is your solution:所以这是你的解决方案:
<div color="primary" class="main-card">
<ion-row>
<ion-col>
<ion-card>
<ion-card-content>
<ion-row class="ion-justify-content-center">
<ion-icon class="home-icons" name="flash"></ion-icon>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-text>a very long text that takes a lot of vertical space</ion-text>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<ion-row class="ion-justify-content-center">
<ion-icon class="home-icons" name="add"></ion-icon>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-text>simple text</ion-text>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card>
<ion-card-content>
<ion-row class="ion-justify-content-center">
<ion-icon class="home-icons" name="flash"></ion-icon>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-text>a very long text that takes a lot of vertical space</ion-text>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<ion-row class="ion-justify-content-center">
<ion-icon class="home-icons" name="add"></ion-icon>
</ion-row>
<ion-row class="ion-justify-content-center">
<ion-text>simple text</ion-text>
</ion-row>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</div>
scss file .scss 文件
.main-card {
background: var(--ion-color-primary);
border-radius: 8px;
display: flex;
flex-wrap: wrap;
margin: 12px;
overflow: hidden;
ion-col {
display: flex;
justify-content: center;
padding: 4px;
}
ion-card {
background: #55bdef;
margin-bottom: 12px;
margin-top: 12px;
width: 100%;
}
ion-card-content {
color: #fff;
}
}
This will solve your problem.这将解决您的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.