[英]Ionic3 html is wrong after pop from other page and close keyboard
問題場景:
問題是:現在顯示Div的距離要比頂部距邊緣少45像素,並且您無法向上滾動。 發生在Android設備上,未在android模擬器上發生。
Page1.html:
<style>
.testMargin
{
margin-top: 45px;
margin-left: 35%;
font-size: 20;
}
.myButton
{
width: 100px;
height: 40px;
margin-left: 30%
}
</style>
<ion-header>
<ion-navbar>
<ion-title>Page1</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="testMargin"><span>TITLE</span></div>
<br>
<button class="myButton" (click)="gotoPage2()">Go to page 2</button>
</ion-content>
Page1.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Page2Page} from '../page2/page2';
@IonicPage()
@Component({
selector: 'page-page1',
templateUrl: 'page1.html',
})
export class Page1Page {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
gotoPage2()
{
this.navCtrl.push(Page2Page);
}
}
page2.html
<style>
.edit
{
width: 50%;
margin-left: 25%;
border: 2px solid black;
font-size: 20px;
}
</style>
<ion-header>
<ion-navbar>
<ion-title>Page2</ion-title>
</ion-navbar>
</ion-header>
<ion-content >
<br><br>
<ion-input class="edit" maxlength="20"></ion-input>
</ion-content>
Page2.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-page2',
templateUrl: 'page2.html',
})
export class Page2Page {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
}
離子信息
cli packages: (C:\Users\sodedkor\AppData\Roaming\npm\node_modules)
@ionic/cli-utils : 1.16.0
ionic (Ionic CLI) : 3.16.0
global packages:
cordova (Cordova CLI) : not installed
local packages:
@ionic/app-scripts : 3.0.0
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.7.1
System:
Node : v6.9.1
npm : 5.5.1
OS : Windows 8.1
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
多虧了Felix9607,我得以解決它:
我在variables.scss中添加了以下內容:
.scroll-content {
margin-top: 57px !important;
}
ion-page > ion-content > fixed-content {
margin-top: 57px !important;
}
原因是.scroll-content和fixed-content在從文本區域失去焦點時被覆蓋為0。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.