Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ionicV4]ion-input，has white rectangle

See original GitHub issue

“@ionic/angular”: “^4.0.0-beta.3”； Test html using ion-input like this：

<div style="background-color: lightblue">
    <ion-item>
      <ion-label>Label1</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label2</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label3</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label4</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Label5</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">Floating Label</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="fixed">Fixed Label</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="stacked">Stacked Label</ion-label>
      <ion-input></ion-input>
    </ion-item>
  </div>

When click the <input> element, before the third one is normal，but after it，there will show a white rectangle，and the style will be added “pointer-events: none” and “transform”

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:9 (4 by maintainers)

Top GitHub Comments

5reactions

sean-perkinscommented, Sep 9, 2018

The issue appears to be related to the native-input class styling not being applied to the cloned input, since the stylesheet is in the shadow dom.

@aaronbach

As a workaround you can style that tag directly (globally). This styling is close:

.cloned-input input {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      outline: 0;
      background: transparent;
}

There just seems to be a pixel shift for inline label/inputs. The offsetTop seems inaccurate for those. Setting it to zero in those cases works, but is not applicable to floating labels.

1reaction

aaronbachcommented, Sep 8, 2018

I also experience this behavior in almost every ion-input.
Do anyone have at least a workaround? I have tried to set opacity: 0 to the overlapping input, but since Ionic 4 is using the Shadow-Dom, I cannot access this properties, but through CSS4 variables.

Top Results From Across the Web

[ionicV4]ion-input，has white rectangle · Issue #15294 - GitHub

This issue is related to calculation of the styles and position of the cloned input. 1

Highlight an ion-input in a ion-item using box-shadow on focus

I'm trying to highlight input fields when the user focuses on them to highlight the current field. I've tried multiple suggestions by modifying ......

Change ion-input underline color in Ionic 4 - Stack Overflow

For Ionic V4.X is a little bit diffrent. You can open specific_page.scss file where you want to change ion-input border when input value...

Building an Ionic App with Firebase Authentication & File ...

If you want a full blown cloud backend for your Ionic app, Firebase offers everything you need out of the box so you...

ion-cheat-sheet: Ionic Framework 4 Cheat sheet

This is a cheat sheet for Ionic Framework 4 presenting all the useful info from official documentation gathered in one place.