I am new to ionic and have created basic page with modal. This have title, textarea, submit button, Star rating.
Question : When keyboard up after click in on textarea views get shifted up or hidden.
After keyboard up expected page slides up and modal look like as below
On device model content get hide like below.
To reproduce issue create simple template app. code is below
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
The world is your oyster.
<p>
If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
</p>
<button ion-button (click)="openModal()"> CLick for Modal</button>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController,ModalController,ModalOptions } from 'ionic-angular';
import {RatePage} from '../rate/rate';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public modalCtrl:ModalController) {
}
openModal() {
console.log("Rate APP btn clicked ");
const modalOptions: ModalOptions = {
cssClass: "ratePageModal"
};
const modal = this.modalCtrl.create(RatePage, {}, modalOptions);
modal.present();
}
}
Create new page “rate” code for rate page is like this.
rate.scss
.ratePageModal {
padding: 30px;
background: rgba(0, 0, 0, 0.5);
.modal-wrapper {
border-radius: 7px;
//background: rgba(0, 0, 0, 0.5) !important;
height: 50% !important;
margin-top: 50%;
border-style: solid;
border-color:#BEBEBE;
border-width: 2px;
}
//height: 450px;
//background-color: blue;
}
div.justified {
display: flex;
justify-content: center;
}
div.titleText {
font-size: 20px;
justify-content: center;
text-align: center;
margin: 5px;
font-family: myFourthFont;
}
.submitButton {
//margin: 0;
border-radius: 0;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 50%;
height: 44px;
border-top: 0.55px solid #dbdbdf;
font-size: 18px;
color: #FFF;
background-color: #005AAA;
font-family: myFourthFont;
padding: 0px;
margin-top: 15px;
}
rate.html
<ion-content padding no-bounce>
<div class="titleText">How would you like to rate me?</div>
<!-- <ionic3-star-rating activeIcon="ios-star" defaultIcon="ios-star-outline" activeColor="#488aff" defaultColor="black"
readonly="false" [rating]="rating">
</ionic3-star-rating> -->
<div class="justified">
<textarea rows="4" cols="50" [(ngModel)]="userComment" (input)="onUpdateTextArea($event)" placeholder="How can I assist you further?"></textarea>
</div>
<button ion-button full small (click)="dismiss()" class="submitButton">
Submit
</button>
</ion-content>
rate.ts file
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,ViewController } from 'ionic-angular';
import { StarRatingModule } from 'ionic3-star-rating';
/**
* Generated class for the RatePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-rate',
templateUrl: 'rate.html',
})
export class RatePage {
constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad RatePage');
}
dismiss() {
this.viewCtrl.dismiss()
}
onUpdateTextArea(event:any) {
var userComment = (<HTMLInputElement>event.target).value;
console.log(userComment);
}
}
Above code will help to get exact issue mentioned in the screen.
If .modal-wrapper height is 100% then page is not scrolling.
Please suggest how can I achieve expected result.