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.