イオン2キーボードがiosで画面外にヘッダーをプッシュ

Question

私は単純なチャットインターフェイスを持っていますが、入力テキストエリアにフォーカスすると、キーボードはヘッダーを含めてすべてをプッシュします。 また、コンテンツ領域の一番上のコンテンツは非表示になっており、上にスクロールできません。

これはios向けです。

<ion-header></ion-header> 
<ion-content> 
    Chat Title... 
    Chat Messages... 
</ion-content> 
<ion-footer> 
    <ion-card class="chat-input"> 
     <textarea appAutoresize class="chat-input-textarea" rows="1" [(ngModel)]="input" placeholder="Ihre Nachricht"></textarea> 
    </ion-card> 
</ion-footer> 

Answer 1

この動画をご覧ください。 https://www.youtube.com/watch?v=9J8AxhDxtTE&t=22s iircあなたはionic serve --labでlaのChromeに適用されたCSSルールを見ることができます。あなたの質問を補うためにCSSを調査/投稿することができます。周りに3〜4分のSafariと..で@ MacBook ProのなどにUSBケーブルを介して接続されたiPhoneは、メニューに

を開発した関与も適用される場合がありますいくつかのメモhereあります：

cordova.plugins.Keyboard.disableScroll(true); 

防止ネイティブUIScrollViewは、入力がフォーカスされているときに移動しません。 これが起こっていることを示す兆候は、アプリの一番上です （Ionicを使用している場合は、ヘッダーバーが消えます）。

これにより、DOM要素がスクロールできなくなることはありません。その は、このプラグインではなく、CSSとJavaScriptから発生する必要があります。

Answer 2

この問題はまだcordova/ionicで公開されていることを長年の研究と読んで、私は自分で問題を解決することにしました。 考え方は、キーボードの高さに応じてヘッダーの高さをプログラム的に調整することです。ビューテンプレート（HTML）のヘッダに

1.-スタイルディレクティブ添付：コンポーネント（TS）で

<ion-header [ngStyle]="getKeyboardStyle()" > 

2.-を、私は、キーボードのイベント（ショー、非表示）をトリガし、高さの値：

Observable.merge(this.nativeKeyboard.onKeyboardShow(), this.keyboard.didShow) 
    .subscribe((e: any) => { 
     this.keyboardHeight = e.keyboardHeight; 
    }); 

Observable.merge(this.nativeKeyboard.onKeyboardHide(), this.keyboard.didHide) 
    .subscribe((e: any) => { 
     this.keyboardHeight = e.keyboardHeight | 0; 
    }); 
} 

ここで、this.keyboardHeightはグローバル変数番号型です。これは、keybaordとthis.nativeKeyboardはコードワインのプラグインです。

getKeyboardStyle() { 
    let style = { 
    'top': this.keyboardHeight ? this.keyboardHeight + 'px' : '0px' 
    } 
    return style; 

私はこれが助けることができることを願っています：

3.-最後に、これはヘッダのngStyleディレクティブに取り付けた高さを返すメソッドです。