Ionic 4 problem with iOS and Android loading UI component

Ionic Framework
1

Hi Guys,

Currently, I’m developing a mobile app using ionic 4 with angular js as backend. I was wondering about the orientation of UI components on both Android and iOS because whenever I run the application, the placement of ion-icon and ion-input are different to both device type.

This is my code snippet for login form

   <ion-item>
     <ion-label position="floating">Username</ion-label>
     <ion-input clearInput type="text"></ion-input>
     <ion-icon name="contact" slot="start" align-self-center></ion-icon>
   </ion-item>
   
   <ion-item>
       <ion-label position="floating">Password</ion-label>
       <ion-input type="password" clearInput></ion-input>
       <ion-icon name="key"slot="start" align-self-center></ion-icon>
   </ion-item>
 </ion-card>

Anyone know how to solve this problem?

error
error882×755 31.3 KB

2

Actually, this is the right behavior, ionic adopts the styling mode (icons, spacing, placements etc) of the device/platform (iOS/Android) in which it is installed.

You need to tell ionic to have a fixed mode if you want a consistent experience and for that you can set “mode” attribute of html tag in index.js

https://ionicframework.com/docs/theming/platform-styles

3

Noted I will try your solution later. Thanks!