Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ion-item should allow overflow css variable #17670

Closed
tompap opened this issue Mar 3, 2019 · 4 comments

Comments

4 participants
@tompap
Copy link

commented Mar 3, 2019

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

@ionitron-bot ionitron-bot bot added the triage label Mar 3, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Mar 4, 2019

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

@ionitron-bot ionitron-bot bot removed the triage label Mar 4, 2019

@uniquejava

This comment has been minimized.

Copy link

commented Mar 25, 2019

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>

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Mar 25, 2019

@uniquejava

This comment has been minimized.

Copy link

commented Mar 25, 2019

@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.

image

@anagstef

This comment has been minimized.

Copy link
Contributor

commented May 29, 2019

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.

brandyscarney added a commit that referenced this issue Jun 10, 2019

brandyscarney added a commit that referenced this issue Jun 11, 2019

fix(item): inherit overflow to allow better customization (#18502)
fixes #17670


Co-authored-by: Stefanos Anagnostou <anagstef@gmail.com>

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Jun 11, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to Done 🎉 in Ionic Core Jun 11, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.