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;
    }
}

      

+3


source to share


1 answer


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! ✌️✌️✌️

+3


source







All Articles