Ion Label Stacked bugged in iOS 11?


#1

Hey!

I have an inputfield with a button like shown below in the code. That worked great until iOS 11. In the latest version the button/icon is floating/moving down every time when clicking on the button. I noticed this issue only with the latest iOS Version. Below is my code, is there maybe another way to realize this without this kind of bug?

INFO: This problem only happens on an iOS Device not on Ion Labs.


<ion-item>
    <ion-label style="font-size: 14px" fixed>User ID:</ion-label>
          <ion-input type="text"  [(ngModel)]="userID"></ion-input>
                <button type="button" style="width: 30px; padding: 0 !important" ion-button large icon-only ion-button clear item-
                 right (click)="barcodeScan()">
                       <ion-icon name="ios-camera"></ion-icon>
                 </button>
</ion-item>

#2

Ion-item is equipped with an ion-label inherently, so adding one can have some unintended consequences. <~ I vaguely recall reading that on the forums a while back. Might want to search for it


#3

Could not find anything related to this.

Do you have any other idea how to solve this?


#4

Replace ion-item with ion-card, then work a solution from there?