Cyb*_*eek 5 css css3 ionic2 ionic3 angular
我想让ion-item它的内容溢出。我尝试了以下CSS(具体来说是CSS)
ion-item{
overflow: visible;
height : 220px;
}
Run Code Online (Sandbox Code Playgroud)
但它似乎不起作用。
我还尝试将overflow : visible属性添加到ion-item(.item-inner,.item-block)生成的元素中,但是那也不起作用。
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="rel-container">
<ion-list>
<ion-item>
<div>Name1</div>
<div>Name2</div>
<div>Lorem ipsum dolor</div>
<div class="error-container">
<div class="error">a quick brown fox</div>
</div>
</ion-item>
</ion-list>
</div>
</ion-content>
Run Code Online (Sandbox Code Playgroud)
home.scss
ion-item,ion-list,ion-label, .item-md, .item-block, .item, .item-inner, .input-wrapper, .rel-container, .button-effect{
overflow: visible;
}
page-home {
ion-item{
height: 9rem;
}
.error-container{
padding: 5px;
background: red;
color: white;
position: absolute;
z-index: 400;
}
.rel-container{
position: relative;
}
}
Run Code Online (Sandbox Code Playgroud)
在我回答之前,这里有一些其他细节
Ionic v3.3.0
Angular v4.1.2
Run Code Online (Sandbox Code Playgroud)
overflow无法正常工作的问题是contain : content;Ionic为所应用的CSS属性.item。
(更多信息在这里:https : //developer.mozilla.org/en-US/docs/Web/CSS/contain)
为了解决这个问题,我只需要使用
.item {
contain:none;
}
Run Code Online (Sandbox Code Playgroud)
和平!??????
| 归档时间: |
|
| 查看次数: |
1828 次 |
| 最近记录: |