I'm currently developing an ionic3 application and everything is running smoothly, except for one issue. Whenever the keyboard is used in inputs or when the inputs are focused, the background image resizes, creating a less than ideal view. After searching extensively online, I came across similar questions on forums, but unfortunately, the solutions provided didn't work for me in the context of ionic3.
Dealing with image resizing in Ionic. Resizing images in Ionic due to keyboard interactions Now, I will share some of the code snippets related to this issue.
<ion-header>
<ion-navbar>
<ion-title>
Login
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="login">
<div class="login-form">
<ion-grid>
<ion-row>
<ion-col col-sm-12>
<ion-list inset>
<ion-item>
<ion-label ionitron-bot>
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input
[(ngModel)]="phone"
type="tel"
placeholder="Enter your phone number"
></ion-input>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-sm-12></ion-col>
</ion-row>
</ion-grid>
</div>
</div>
</ion-content>
**
SCSS style codes.
page-new-user {
ion-content{
height: 100%;
}
div.login {
width: 100%;
height: 100%;
background: url("../../../assets/imgs/bg-01.jpg") no-repeat;
background-size: cover;
background-position: 100% 100%;
height: 100%;
div.login-form {
width: 50%;
height: auto;
margin: auto;
background-color: #ddd;
}
}
}
Furthermore, I will be sharing screenshots of the application.