Hi there,
background image and input text size gets Shrinks/minimized when keypad is on. I have tried all the given options (separate class for background, changing background style of scroll-content or .pane etc) but unable to fix this issue. please help.
login.html
<ion-content text-center>
<div>
<div class="head" text-center>
<p>Login</p>
</div>
<div class="inputs">
<ion-item>
<ion-label fixed>User Name</ion-label>
<ion-input type="text"></ion-input>
</ion-item>
<span class="space"> </span>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password"></ion-input>
</ion-item>
<span> </span>
<button ion-button block (click)="doLogin()"><b>Login</b></button>
<p> </p>
forgot password?<br><button id="btn" outline ion-button round (click)="forgotPass()">Click Here</button>
</div>
</div>
</ion-content>
login.scss
page-login {
.scroll-content {
background: url(../assets/imgs/bg.jpg) no-repeat ;
height: 100%;
//width: 100%;
// background: linear-gradient(60deg,#088A29 20%,#A9F5A9 60%);
//background: linear-gradient(10deg,#A9F5A9 10%,#088A29 60%);
-webkit-background-size: 280% cover;
-moz-background-size: cover;
background-size: cover;
}
.head{
font-size: 2.8vh!important;
color: rgb(1, 94, 24);
display: block;
font-weight: bold;
top: 20%;
margin-left: 50%;
transform: translate(-50%,60%);
width:100%;
}
.inputs{
position: obsolute;
margin-top: 10%;
transform: translate(11%,30%);
width: 85%;
color: rgb(1, 94, 24);
opacity: 2;
font-weight: bold;
}
ion-item{
background: transparent!important;
border: 1px solid #000!important;
ion-input{
color: #000;
font-size: 2.5vh!important;
}
ion-label{
color: #000!important;
font-size: 2.5vh!important;
font-weight: bold!important;
}
// .pass{
// border-bottom-color: transparent !important;
// box-shadow: none !important;
// }
}
button{
margin-top: 15px!important;
//display: block;
//top:50%;
background: #fff!important;
border: 1px solid #088A29;
box-shadow: 0px;
color: #9A9595!important;
//align-content: right!important;
}
.foot{
display: block;
margin-top: 40%!important;
transform: translate(18%,0%);
width: 80%;
color: rgb(3, 46, 5)!important;
font-weight: bold!important;
font-size: 2vh!important;
}
.foot a{
text-decoration: none;
color: rgb(1, 94, 24)!important;
}
#btn{
background: transparent!important;
border: 0.5px solid #088A29!important;
color: #088A29!important;
text-transform: none;
}
}
Normal Background :
Background and Input text minimized
