Prevent content resize through keyboard

@Roebie wrote:

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?

Screenshot_20180211-120038.png720x1280 26.7 KB

Screenshot_20180211-120101.png720x1280 57.1 KB

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();
		}
	}
}

Posts: 1

Participants: 1

Read full topic