Hy everybody,
I try to style my login page in a responsive way. The page has 3 flex boxes. A logo-, a form- and a round box (a big circle) to sign up. When keyboard pushes up, the content ist resized. My hope: no resize of contenten and vertical center the current selected input field.
In moment the flex boxes use VH. What is the best way to prevent resize through the keyboard … in android and ios?
Template
<ion-content>
<div class="container">
<!-- LOGO -->
<div class="logoBox">
<img class="logo" alt="powerfox" src="assets/img/logo blank.png">
</div>
<!-- FORMULAR -->
<div class="formBox">
<form #f="ngForm">
<ion-grid no-padding>
<ion-row>
<ion-col>
<div class="form-group">
<ion-item>
<ion-label color="primary" class="inputLabel" floating>E-Mail</ion-label>
<ion-input tabindex="1" type="email" name="emailAddress" class="inputElement inputEmail form-control" required [(ngModel)]="emailAddress"
autocomplete="on"></ion-input>
</ion-item>
</div>
</ion-col>
</ion-row>
<ion-row class="formInputRow">
<ion-col>
<div class="form-group">
<ion-item>
<ion-label color="primary" class="inputLabel" floating>Passwort</ion-label>
<ion-input tabindex="2" type="password" name="password" class="inputElement inputPassword form-control" required [(ngModel)]="password"></ion-input>
</ion-item>
</div>
</ion-col>
</ion-row>
<ion-row class="formButtonRow">
<ion-col>
<button type="button" tabindex="3" [disabled]="!f.valid" ion-button round color="pf-positiv" class="formButton" (click)="login()">
<ion-spinner *ngIf="(getUserSubscription != null) && (!getUserSubscription?.closed)"></ion-spinner>
<span *ngIf="(getUserSubscription == null) || (getUserSubscription?.closed)">LOGIN</span>
</button>
</ion-col>
</ion-row>
</ion-grid>
</form>
</div>
<!-- FOOTER -->
<div class="footerBox">
<div class="footerCircle" (click)="toRegistration()" tappable #Circle>
<div>Nicht Registriert?</div>
<div>SIGNUP</div>
</div>
</div>
</div>
</ion-content>
Style
page-login {
.container {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
}
.logoBox {
flex: 0 0 27vh;
@media (orientation: portrait) {
padding-top: 14vh;
}
@media (orientation: landscape) {
padding-top: 4vh;
}
.logo {
height: 27vh;
}
}
.formBox {
flex: 0 1 100%;
display: flex;
align-items: center;
text-align: center;
.inputElement {
border: 1.25px solid $pf-grey;
border-radius: 5px;
}
.inputEmail {
background: url(../assets/img/email.svg) no-repeat;
background-size: 50% 50%;
background-position: -30% 50%;
}
.inputPassword {
background: url(../assets/img/password.svg) no-repeat;
background-size: 50% 50%;
background-position: -30% 50%;
}
.formInputRow {
padding-top: 1px;
}
.formButtonRow {
padding-top: 20px;
.formButton {
width: 50%;
}
}
}
.footerBox {
height: 9vh;
.footerCircle {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
@media (orientation: portrait) {
padding-top: 4vh;
}
@media (orientation: landscape) {
padding-top: 3vh;
}
// background: linear-gradient(to bottom, $pf-normalMinus10 0%, black 12.5%);
background: $pf-normalMinus10;
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
font-style: italic;
@media (orientation: portrait) {
font-size: 2vh;
}
@media (orientation: landscape) {
font-size: 3vh;
}
}
.footerCircle > div:nth-child(1) {
margin-right: 5px;
color: $pf-normal;
}
.footerCircle > div:nth-child(2) {
margin-left: 10px;
color: $pf-white;
font-weight: bold;
}
}
// input field - android
.item-label-stacked .text-input-md,
.item-label-floating .text-input-md {
padding: 0 10px 0 10px;
}
// input field - ios
.item-ios.item-label-stacked .text-input,
.item-ios.item-label-floating .text-input {
padding: 0 10px 0 10px;
}
input {
text-align:center;
}
// label - android
.label-md-primary,
.item-input .label-md-primary,
.item-select .label-md-primary,
.item-datetime .label-md-primary {
color: $pf-normal !important;
margin: auto;
}
// label - ios
.label-ios-primary,
.item-input .label-ios-primary,
.item-select .label-ios-primary,
.item-datetime .label-ios-primary {
color: $pf-normal !important;
margin: auto;
}
// line input bottom - android
.item-md.item-block .item-inner {
border-bottom: unset !important;
box-shadow: unset !important;
}
// line input bottom - ios
.item-ios.item-block .item-inner {
border-bottom: unset !important;
box-shadow: unset !important;
}
}
TS
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { IonicPage, NavController, ToastController, Content } from 'ionic-angular';
import { Subscription } from 'rxjs';
// components
import { MenuTabs } from '../../components/menuTabs/menuTabs';
//pages
import { Registration } from '../../pages/registration/registration';
// services
import { BackendAuthentication } from '../../services/authentication/backend/backendAuthentication';
import { BackendCommunication } from '../../services/backend/backendCommunication';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class Login implements OnInit{
@ViewChild('Circle') circle: ElementRef;
// @ViewChild('Contents') contents: ElementRef;
// @ViewChild(Content) content: Content;
public getUserSubscription: Subscription = null;
private emailAddress: string = null;
private password: string = null;
constructor(
public navCtrl: NavController,
public toastCtrl: ToastController,
private backendAuthentication: BackendAuthentication,
private backendCommunication: BackendCommunication
) { }
public login() {
if (this.getUserSubscription) {
this.getUserSubscription.unsubscribe();
}
this.backendAuthentication.setCredentials(this.emailAddress, this.password);
this.getUserSubscription = this.backendCommunication.getUser()
.subscribe((customer) => {
this.navCtrl.setRoot(MenuTabs);
}, (error) => {
if((error.status !== 'undefined') && (error.status == 0)) {
this.presentToast('Es konnten keine Verbindung hergestellt werden. Überprüfen Sie Ihre Internetverbindung!');
} else {
this.presentToast('Überprüfe deine Login-Daten');
}
this.backendAuthentication.clearCredentials();
this.password = null;
});
}
public toRegistration(){
this.navCtrl.push(Registration);
}
private setCircleStyle() {
this.circle.nativeElement.style.height = ((window.innerWidth / window.innerHeight) * 530).toString() + 'vw';
this.circle.nativeElement.style.width = ((window.innerWidth / window.innerHeight) * 530).toString() + 'vw';
}
private presentToast(message: string) {
let pageToast = this.toastCtrl.create({
message: message,
duration: 5000,
position: 'top'
});
pageToast.present();
}
ngOnInit() {
this.setCircleStyle();
window.onresize = () => {
this.setCircleStyle();
};
}
ionViewDidLeave() {
if ((this.getUserSubscription !== null) && (!this.getUserSubscription.closed)) {
this.getUserSubscription.unsubscribe();
}
}
}