簡體   English   中英

從其他頁面彈出並關閉鍵盤后,Ionic3 html是錯誤的

[英]Ionic3 html is wrong after pop from other page and close keyboard

問題場景:

  1. 假設您在第1頁的內容中具有45px距頁邊距的Div
  2. 按下按鈕並導航至第2頁
  3. 在textarea上輸入文字
  4. 觸摸屏幕上的任意位置以強制鍵盤關閉
  5. 點擊軟后退按鈕。

問題是:現在顯示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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM