I have the following content for my login page:
<ion-content class="login">
<div class="overlay">
<button class="menu-button" ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<div class="space"></div>
<ion-grid>
<ion-row>
<ion-col col-12 text-center>
<h1>
Incredible Weather
</h1>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 text-center>
<h2>
SignIn to access
</h2>
</ion-col>
</ion-row>
</ion-grid>
<!-- <ion-content> -->
<form #f="ngForm" (ngSubmit)="onSignIn(f)">
<ion-grid>
<ion-row>
<ion-col col-10 offset-1>
<ion-list>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input type="text" ngModel name="Mail" required></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input type="password" ngModel name="Password" required></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-10 offset-1>
<button ion-button block type="submit" [disabled]="!f.valid">Sign In</button>
</ion-col>
</ion-row>
</ion-grid>
</form>
<div class="sign-in" style="text-align:center">
<p style="color:#fff;">Please <a style="text-decoration:underline; color:greenyellow" (click)='signInPage()'>sign up</a> before loggin in.</p>
</div>
<!-- </ion-content> -->
</div>
</ion-content>
And this is the markup for the page:
page-signin {
.login{
background-image: url("../assets/imgs/weather.jpeg") !important;
background-repeat:no-repeat;
background-size:cover;
width:100%;
}
.button-full{
position: fixed;
bottom:0;
left:0;
}
.menu-button{
position: absolute;
top:20px;
left:25px;
box-shadow: none;
margin:0;
padding: 0;
background: transparent;
ion-icon{
font-size:2.9em;
color:greenyellow
}
}
.item-md,.item-ios{
background: none !important;
color:#fff;
padding-left: 0;
}
.item-input .label-md{
color:#fff;//text on label
}
.item-input.item-input-has-focus .label-md[floating], .input-has-focus .label-md[floating]{
color:#fff;
}
.item-md.item-input.item-input-has-focus.item-inner,.item-md.item-input.item-input-has-focus .item-inner{
border-bottom-color: #fff;
box-shadow: inset 0 -1px 0 0 #fff;
color:#fff;
}
.list-md .item-input.item-input-has-focus:last-child,.list-md .item-input.input-has-focus:last-child{
border-bottom-color: #fff;
box-shadow: inset 0 -1px 0 0 #fff;
}
.space{
padding-top:120px;
}
h1{
margin-top: 2rem;
font-size: 4rem;
margin-bottom: 3rem;
color: greenyellow;
}
h2{
margin-top:0;
font-size: 3rem;
color:#fff;
}
.overlay{
background: rgba(0,0, 0, .4);
height:100vh;
}
}
Now when I tap on any field keyboard shows up but doesn’t align the input well with the keyboard; it instead hides it and then when I start to type it pushes the content a towards the top.
Attaching some images for clarity:
Initial Login screen:
![login]()
When user taps on a field like username(hides the input):
![tapkeyboardlogin]()
When user starts typing(inputs moves a lot up):
![typelogin]()
It might be that I am not following proper ionic styling as this is one of my starter apps in ionic. It would be great if someone can point me in the right direction so that I can learn more and proceed.