Ionic-framework: ion-item should allow overflow css variable

[tompap]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request

Currently item-inner and input-wrapper add some overflow:hidden, but due to webcomponent and how there are working it's not possible to override this settings.
We have a custom input that should be over the input but not possible due to overflow:hidden

[brandyscarney]

Thank you for the issue! Do you have an example of the HTML / CSS you are using so we can reproduce the issue and make sure we understand the use case? Here's a sample Ionic 4 Codepen if you would like to fork it: https://codepen.io/pen?template=aXENNW

[uniquejava]

I have the same request. My .error class has a style of position: absolute; bottom: -2px and I'd like this nested .error element sit on top of ion-item bottom border.
However the ion-item's overflow is hidden. It's covering my error element. I'd like to set ion-item's over flow as visible.

  <ion-item>
        <ion-label position="fixed">PIN</ion-label>
        <ion-input
          type="number"
          pattern="[0-9]*"
          (keydown)="onKeyDownLimitLength($event, 7)"
          inputmode="numeric"
          formControlName="acct_no"
        ></ion-input>
        <span class="error">Please you need to enter 7 digits!</span>
      </ion-item>

[uniquejava]

@brandyscarney Hi, I created some sample codepen code snippet here: https://codepen.io/uniquejava/pen/OqqyOj

You see the message Please you need to enter 7 digits! is not showing correctly.

The following are some visual effect we'd like to implement.

Thank you.

[anagstef]

Hello! I have a case where overflow is needed for ion-item here: https://codepen.io/masimakopoulos/pen/oRPyKx

Also, I've opened a PR (#18410) adding this feature, where overflow css variable is exposed.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.