How do I make an ionic element resolve overflow in Ionic 2?
I want to do ion-item
allow content overflow. I tried the following css (scss to be specific)
ion-item{
overflow: visible;
height : 220px;
}
but it doesn't work.
I also tried to add a property overflow : visible
to the elements generated ion-item
(e.g. .item-inner
, .item-block
), but that didn't work either.
Edit (adding code snippets)
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>
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;
}
}
source to share
Before answering, here are some funny details.
Ionic v3.3.0
Angular v4.1.2
The problem that overflow
doesn't work as expected is the CSS property contain : content;
applied by Ionic to .item
.
(More details here: https://developer.mozilla.org/en-US/docs/Web/CSS/contain )
To solve this problem I just had to override it with
.item {
contain:none;
}
World! ✌️✌️✌️
source to share