Ionic-framework: Die Kopfzeile bewegt sich hinter der Statusleiste nach oben oder sogar vollständig aus dem Ansichtsfenster, wenn das Formularfeld fokussiert ist

Duplikat von #818

Vielen Dank. Wir arbeiten an diesen Tastaturfehlern für Beta2.

Haben Sie Hinweise, woran das liegen könnte?
Zu dem Zeitpunkt, zu dem Sie planen, Beta2 zu veröffentlichen, ist meine App bereits in freier Wildbahn ;-)

Hier ist eine funktionierende Demonstration dieses Problems:

Ich habe dies gerade über den "Getting Started"-Prozess mit "Ionic, v1.0.0-beta.1" getestet.

Meine Schritte:

• npm install -g cordova ionisch
• ionic start statusBarTest Seitenmenü
• ionische Plattform ios hinzufügen

Ich habe dann app.js bearbeitet, um mit einem einfachen Formular zu beginnen. :

<ion-view title="Form Test">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">

    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="First Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Middle Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Last Name">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 1">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Address 2">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="City">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="State">
      </label>
      <label class="item item-input">
        <input type="text" placeholder="Zip Code">
      </label>
    </div>

  </ion-content>
</ion-view>

Dann:

• ionischer Aufbau ios
• ionisch emulieren ios

Hier ist das Ergebnis:

Wie Sie sehen, schiebt die Tastatur das Formular nach oben in die Statusleiste.

Hey Justin, ich glaube das Problem ist das

Probiere das aus und lass es mich wissen, wenn es hilft.

Am Mittwoch, den 2. April 2014 um 16:34 Uhr schrieb Justin Noel [email protected] :

Hier ist eine funktionierende Demonstration dieses Problems:

Ich habe dies gerade über den Prozess "Erste Schritte" mit "Ionic,
v1.0.0-beta.1".

Meine Schritte:

• npm install -g cordova ionisch
• ionic start statusBarTest Seitenmenü
• ionische Plattform ios hinzufügen

Ich habe dann app.js bearbeitet, um mit einem einfachen Formular zu beginnen. :

<div class="list">
  <label class="item item-input">
    <input type="text" placeholder="First Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Middle Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Last Name">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 1">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Address 2">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="City">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="State">
  </label>
  <label class="item item-input">
    <input type="text" placeholder="Zip Code">
  </label>
</div>

Dann:

• ionischer Aufbau ios
• ionisch emulieren ios

Hier ist das Ergebnis:

[Bild: Statusleistenproblem] https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

Wie Sie sehen, schiebt die Tastatur das Formular nach oben in die Statusleiste.

Antworten Sie direkt auf diese E-Mail oder zeigen Sie sie auf Gi tHub anhttps://github.com/driftyco/ionic/issues/932#issuecomment -39386769
.

Das hat leider nicht geholfen. Im Beispielprojekt habe ich dies der "style.css" hinzugefügt:

body, .ionic-body {
    position: static;
}

Das hat nicht funktioniert, obwohl "style.css" nach der Ionic CSS-Datei enthalten ist. Ich habe auch im Safari-Debug bestätigt, dass position: static auf den Körper angewendet wurde.

Also versuchte ich es dann einfach ohne Glück.

body {
    position: static;
}

Als nächstes habe ich gerade die Datei "ionic.css" aktualisiert. Dies funktionierte immer noch nicht.

Ich dachte auch, Sie hätten den Header statisch machen wollen; also habe ich es probiert. Auch damit kein Glück.

Ich habe nicht gesehen, dass es nur iOS 7.1 ist. Ich habe gerade keinen Zugriff auf einen Mac, also werde ich morgen als erstes nachsehen. Vielen Dank für Ihre Hilfe, dies zu untersuchen.

Danke für die funktionierende Demo Justin :+1:

Abhängig von Ihrem Setup wird die Einstellung von .body auf position:static nichts beheben, da .pane und .view auch absolute Positionen haben.

In benutzerdefinierten mobilen Web-Apps, die ich erstellt habe, muss sich die Kopfzeile außerhalb eines dieser stark positionierenden Elemente befinden und die Kopfzeile selbst muss auf position:fixed , um dort zu bleiben, wenn die Tastatur geöffnet ist. Android hat eine Option namens adjust-resize die die Ansicht so zusammendrückt, dass sie über die Tastatur passt. iOS hingegen schwenkt nur die Ansicht, um die Eingabe auf dem Bildschirm zu zentrieren.

Cordova hat auch eine Einstellung namens "KeyboardShrinksView", die standardmäßig auf "false" gesetzt ist. Ich habe mir das noch nicht angesehen, aber es sieht aus wie eine Lösung für iOS für das, was Android bereits mit adjust-resize macht

Eine Harmonie zwischen diesen beiden Unterschieden zu schaffen ist eine HÖLLE Aufgabe

Wir arbeiten derzeit aktiv an Tastaturkorrekturen, um all diese Probleme zu beheben.

Dieser Fehler wird in Nightly 1717 leider nicht behoben.

Eine Sache, die @tlancina bemerkt hat, ist, dass bei den neuesten Tap-Fixes, wenn Sie direkt auf die Eingabe klicken, die Kopfzeile nicht nach oben verschoben wird. Ich denke, wir haben einen Teil dieses Problems gelöst. Wenn Sie jedoch auf das Label tippen, das eine Eingabe umschließt, wird 300 ms später das hässliche native Scrollen ausgeführt. Die Art und Weise, wie das standardmäßige Ionic-CSS funktioniert, ist schwer zwischen dem Wrapping-Label und der tatsächlichen Eingabe zu unterscheiden, daher könnte dies ein Grund dafür sein, dass es nicht immer funktioniert. Ich habe diese Testseite verwendet , um diese Probleme auf jedem Gerät zu beheben.

Im Moment denke ich, dass der Grund darin liegt, dass wir die Standardeinstellung für einen Label-Klick nicht verhindern. Wenn wir e.preventDefault() auf einem Etikett ausführen, das eine Eingabe umschließt, wird die Tastatur beim ersten Tippen nicht automatisch angezeigt. Das werde ich mir genauer anschauen, danke.

@adamdbradley meldet sich freiwillig als weiterer Tester für diesen Fix, wenn er in die Nachtschichten kommt. Danke.

Leider ist dieses Problem in 1.0.0 beta2 noch nicht behoben.

@CoenWarmer Wir sind uns der Probleme bewusst und arbeiten noch daran. Denken Sie auch daran, dass Sie beim Melden von Tastaturproblemen bitte die Plattform, die Plattformversion und das Problem im mobilen Browser, Emulator oder in Cordova angeben, und wenn es Cordova ist, ist es Vollbild oder nicht. Andere nützliche Informationen sind das angetippte Element, wie das Label oder die Eingabe, mussten Sie jederzeit manuell scrollen, um zu einer Eingabe zu gelangen, hat der Meta-Viewport height=device-height oder nicht und ob das Element ist unten, wo die virtuelle Tastatur schließlich angezeigt wird, zeigt sie halb an, wo die Tastatur angezeigt wird, oder ist sie oben und es ist kein Scrollen erforderlich. Vielen Dank

Begegnet am:

• iOS7.1.1
• Ionic 1.0.0 Beta 2
• in Cordova
• in Simulator und Gerät
• kein Vollbild
• kein Label verwendet, nur Eingabe
• die Ansicht kann gescrollt werden, nachdem das Eingabefeld den Fokus erhalten hat, wenn das Eingabefeld keinen Fokus hat, kann die Ansicht nicht gescrollt werden
• die Ansicht scrollt nicht sofort, nachdem sie den Fokus erhalten hat und die Tastatur eingeblendet wird. Wenn das Eingabefeld den Fokus erhält, können Sie Ihren Finger auf das Eingabefeld legen und nach oben ziehen, um die Ansicht aus der Webansicht zu verschieben.

Passiert auch auf Android 4.4 und 4.3, auch mit 1.0.0 beta2. Exakt die gleichen Umstände wie bei iOS7.1. Wenn also das Eingabefeld den Fokus erhält und die Tastatur eingeblendet wird, ist nichts falsch. Wenn die Eingabe den Fokus erhält und Sie dann Ihren Finger auf das Eingabefeld legen und es nach oben oder unten ziehen, können Sie den gesamten Inhalt aus der Ansicht verschieben . Werde später einen Screencast machen.

Screencast: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

Nach Beta2 habe ich dieses Problem auf kleinen Bildschirmen (wie iphone3 oder iphone4).

iPhone 5 (ok)

iPhone 4 (Probleme)

@zelphir Können Sie bitte einen Codepen bereitstellen, der dieses Problem repliziert? Sind beide iOS 7.0 oder 7.1?

@CoenWarmer ist Ihre Eingabe in einem Inhaltsbereich zufällig? Die einzige Möglichkeit, Ihr Problem zu replizieren, besteht darin, eine Eingabe zu haben, die sich nicht in einer Bildlaufansicht befindet.

Nur zur Verdeutlichung - dies ist das erwartete Verhalten, wenn Sie keine Bildlaufansicht verwenden. Wenn sich unterhalb der Tastatur Eingaben befinden und Sie mit JS nicht zu diesen scrollen können, ist der Browser gezwungen, den Inhalt nach oben zu verschieben, damit sie sichtbar sind, weshalb Sie alles nach oben verschieben können.

@tlancina Meine Eingabe befindet sich nicht in einem Inhaltsbereich.

Dies ist der Code, den ich verwende:

<ion-view title="Delegates">
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>

  <ion-tabs class="tabs-icon-only tabs-double">
    <ion-tab title="A-Z">
      <ion-content class="slide-under-header has-header has-tabs has-double-tabs" padding="false" delegate-handle="DelegateScroll">
        <!-- stuff -->
      </ion-content>
    </ion-tab>
    <!-- another ion-tab -->
  <ion-tabs>
</ion-view>

Ich bin mir nicht sicher, ob ich ganz dem folgen kann, was Sie über das erwartete Verhalten sagen. Im Moment sieht es so aus, als ob die App kaputt geht, wenn alles unter der Kopfzeile scrollt. Soll ich das Eingabefeld stattdessen innerhalb eines Ioneninhalts platzieren?

Angenommen, Sie haben eine Liste mit mehreren Eingaben, die bis zum Ende Ihrer Seite reicht. Wenn sie sich nicht in einem Bereich befinden, zu dem mit Javascript gescrollt werden kann, wie können sie dann angezeigt werden, wenn die Tastatur auftaucht? Die einzige Möglichkeit besteht darin, das native Browser-Scrollen zu verwenden, das durch Verschieben des Inhalts funktioniert - alles einschließlich des Headers.

Wenn sich ein Eingabe- oder fokussierbarer Bereich innerhalb einer ionischen Scroll-Ansicht befindet, verhindern wir das standardmäßige Scrollen und verwenden Javascript, um ihn anzuzeigen, wobei der Header an Ort und Stelle bleibt.

Ich bin leider kein UI-Router-Experte, aber versuchen Sie, den Ionen-Inhalt um den gesamten Inhalt der Seite herum zu platzieren und sehen Sie, ob das hilft.

Ich verstehe jetzt - aber führt das nicht zu dem unerwünschten visuellen Effekt, dass die gesamte Navigationsleiste einschließlich des Zurück-Buttons verschwindet?

Genauer gesagt in meinem Anwendungsfall, wenn ich das Eingabefeld in einen ion-content platziere, wie kann ich dann sicherstellen, dass sie oben unter der Kopfleiste so fixiert bleiben, dass Übergangsanimationen auf iOS und Android korrekt funktionieren?

Ja, die Situation, mit Tabs zu jonglieren und einen scrollbaren Bereich für eine Eingabe aufrechtzuerhalten, scheint ziemlich knifflig zu sein und wird ziemlich oft vorkommen. @adamdbradley und ich

Ich bin mir nicht sicher, ob ich das Problem mit Übergängen verstehe, wenn Sie so etwas tun wie

<ion-content>
  <div class="search-container">
    <div class="search-inner">
      <input ng-model="searchText" placeholder="Search" ng-enter="ScrollTop()">
    </div>
  </div>
</ion-content>

Bringt es die Animationen durcheinander? Es ist durchaus möglich, dass mehrere Inhaltsbereiche andere Dinge durcheinander bringen, da wahrscheinlich davon ausgegangen wird, dass es nur einen gibt.

@tlancina Ah großartig, ich habe nicht in Betracht gezogen, zwei Elemente mit

Das Problem mit Übergangsanimationen, auf das ich mich bezog, tritt bei bestimmten Android-Versionen auf. Wenn Sie position: static für ein Element verwenden und von dieser Ansicht weggehen, bleiben diese Elemente unter Android 4.1 auf 4.3 (ich glaube, nicht 100% sicher, wird überprüft) gesperrt, sobald die Animation beginnt. Alle Elemente (Ion-Content, Tabs, Header-Leisten usw.) bewegen sich also nach links, aber das Element, dem Sie position:static zugewiesen haben, bleibt an derselben Stelle, bis die Animation abgeschlossen ist. Unter iOS passiert das nicht. Aus diesem Grund zögerte ich, die Positionsstatik überall zu verwenden.

@tlancina Ich habe gerade versucht, das Eingabeelement in einen

@CoenWarmer Das liegt daran, dass der

Versuchen Sie, einen Controller über beide Inhalte zu legen. Wenn der Controller dies ist, verwenden Sie nicht einfach ein Primitiv für die Eingabe.

Sie leiden unter dem Punktproblem der Bereichsvererbung - ein Primitiv in einem anderen untergeordneten Bereich wird auf den untergeordneten Bereich gesetzt, nicht auf den übergeordneten Bereich. Weißt du was ich meine? Wenn nicht, lass es mich wissen und ich werde einen Link finden / es erklären.

Kenne ihn nicht, leider nein. Möchten Sie teilen? :)

https://www.youtube.com/watch?v=DTx23w4z6Kc

Ah, ja, das macht Sinn! Werde es noch einmal versuchen :+1:

Hallo @adam. Wie wäre es mit einer Fußzeile mit einer Eingabe? Da dies außerhalb des Scrollbereichs liegt, wird es auch das Problem verursachen. Kann man das irgendwie umgehen?

Ich habe dieses Problem auch auf dem iPad (7.1). Ich habe gesehen, dass ionic dem Ansichtsfenster nach den letzten Änderungen height=device-height hinzufügt, wenn es nicht festgelegt ist.
Durch diese Eigenschaft wird das Viewport um ca. 200px (Höhe) zu groß und ist komplett scrollbar.
Wenn ich es entferne funktioniert es.
Ich kann dies irgendwie beheben, wenn ich .view und .pane auf position: fixed und body auf position: static setze, aber das Hauptansichtsfenster ist immer noch zu groß und zeigt eine Bildlaufleiste auf der rechten Seite an, wenn ich den Finger nach oben und unten bewege.

Übrigens ... das ist unabhängig vom Eingabefokus. Der Eingabefokus verschiebt nur die Bildlaufposition, damit Sie das Ergebnis sehen können.

Hey Leute, wie ist der aktuelle Fortschritt hier?
Ich habe eine benutzerdefinierte Ionendatei erstellt und den Zusatz 'height=device-height' daraus entfernt.
Nach dieser Änderung funktioniert alles einwandfrei. Es sind keine CSS-Korrekturen mehr erforderlich und der Fokus auf das Tippen auf das Eingabefeld funktioniert ordnungsgemäß.
Ich verwende auch das Keyboard-Plugin unter iOS und gehe wie folgt vor:

Keyboard.shrinkView(true);
Keyboard.hideFormAccessoryBar(true);

Das Platzieren der Eingabe in einem separaten Ionen-Inhalt verhindert auch nicht das Verhalten, die gesamte Ansicht einschließlich der Kopfleiste unterhalb der Webansicht scrollbar zu machen, wenn die Eingabe den Fokus erhält. Es tritt das gleiche Verhalten auf wie in meinem vorherigen Screencast: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

@D3CK3R wir arbeiten daran, all die verschiedenen Viewport-Szenarien in

@CoenWarmer würde es Ihnen etwas auszuprobieren ? Wir haben es gerade veröffentlicht und ich bin gespannt, wie es bei Eingaben außerhalb einer Scroll-Ansicht funktioniert.

Sie können es installieren, indem Sie cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git in Ihrem Cordova-Projekt ausführen.

@tlancina Das funktioniert! Nachdem ich das Plugin hinzugefügt habe, kann der Inhalt nicht mehr unter das Ansichtsfenster gezogen werden, wenn die Eingabe den Fokus hat. Fantastisch!!

Ist das Plugin bereit für die Produktion? Ich würde dies gerne so schnell wie möglich bereitstellen, da dieses Projekt gerade im Store veröffentlicht wurde.

@CoenWarmer du hast keine Ahnung, wie glücklich ich mich über deinen letzten Kommentar gefreut habe! Tolle Arbeit @tlancina!

@adamdbradley @tlancina

Ja!!!

@CoenWarmer ja für iOS ist es produktionsbereit. Wir haben eine frühere Version davon in einer App, die gerade in den App Store aufgenommen wurde, und ich glaube nicht, dass das Scroll-Zeug, das wir hinzugefügt haben, ein Grund zur Ablehnung ist. Wirklich froh, dass es bei dir funktioniert!

Gut zu schließen? @tlancina

Dies war noch ein Problem in der Beta14-Version. Nach einigem ausgiebigem Debuggen habe ich endlich die Lösung gefunden.

In meinem Fall war es mit meinem meta viewport .

Ursprünglicher Wert (dadurch wird die Kopfzeile hinter der Statusleiste angezeigt)

<meta name="viewport" content="width=device-width">

Neuer Wert (Behebung dieses Problems)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Ich habe mein Projekt waaaay vor beta1 also war dies wahrscheinlich ein veraltetes HTML, das ich nie bemerkt habe.

Hoffe das hilft jemandem.

@rvanbaalen Ich habe einen genauen Meta-Viewport in meiner Indexdatei, aber in meinem Fall, wenn ich das Eingabetextelement fokussiere, sitzt der Körper oben auf der Statusleiste, was dazu führt, dass die Statusleiste ausgeblendet wird. Die Statusleiste bleibt danach auch nach dem Herunterschieben der Tastatur ausgeblendet.

Das ist für mich immer noch ein Thema. Ich habe das Tastatur-Plugin hinzugefügt. Ich versuche, einen einfachen Textbereich als "Notizblock" zu verwenden, damit er den gesamten Bildschirm ausfüllt, wie Sie mit meiner Höhe sehen können: 100% Stile. Damit diese Stile funktionieren, musste ich das Scrollen mit scroll="false" deaktivieren, da der Höhenstil nur auf die Höhe des übergeordneten Elements erweitert wird. Es gibt wahrscheinlich eine bessere Möglichkeit, diesen "Notizblock" zu erstellen, um dieses Problem zu vermeiden, und ich würde mich über Vorschläge freuen.

Ich habe dem Textbereich eine Hintergrundfarbe hinzugefügt, um die Screenshots unten deutlicher zu machen.

Ich verwende diese Ansicht:

<ion-modal-view>
    <ion-header-bar class="bar-royal">
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.closeAddNote()">Cancel</button>
        </div>
        <h1 class="title">Add Note</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="vm.saveNote(vm.noteContent)">Done</button>
        </div>
    </ion-header-bar>
    <ion-header-bar align-title="left" class="bar-subheader bar-stable">
        <h3 class="title">adding note for `client name`</h3>
    </ion-header-bar>
    <ion-content class="has-subheader" scroll="false">
        <div class="list padding" style="height: 100%;">
            <textarea placeholder="Comments" style="height: 100%; width: 100%;" ng-model="vm.noteContent"></textarea>
        </div>
    </ion-content>
</ion-modal-view>

Erste Ansicht

Nach Anklicken des Textbereichs

Zeigen, dass ich scrollen kann, während der Textbereich den Fokus hat.

Immer noch ein Problem Leute, bitte helft @ajoslin @adamdbradley

iOS-Simulator - iPhone 6 / iOS 8.3
ionische Version 1.0.0-rc.0
installierte Plugins:

• com.ionic.tastatur
• com.phonegap.plugins.PushPlugins
• org.apache.cordova.console
• org.apache.cordova.device
• org.apache.cordova.file
• org.apache.cordova.geolocation
• org.apache.cordova.media

HTML aus Modal:

<ion-modal-view>
  <ion-header-bar>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="closeModal()">Cancel</ion-button>
    </div>
    <h1 class="title">Modal View</h1>
    <div class="buttons">
      <ion-button class="button button-clear" ng-click="create()">Create</ion-button>
    </div>
  </ion-header-bar>
  <ion-content>    
    <form>
...
</form>
</ion-content>
</ion-modal-view>

@ravivit9 @mikehaas763 @AshleyRudland
du solltest es versuchen

iOS Notes
If the content of your app (including the header) is being pushed up and out of view on input focus, 
try setting cordova.plugins.Keyboard.disableScroll(true). 
This does not disable scrolling in the Ionic scroll view, 
rather it disables the native overflow scrolling that happens automatically as a result of focusing on inputs below the keyboard.

von tastatur ios note

es wird wie ein Zauber funktionieren.

kann ich cordova.plugins.Keyboard.disableScroll(true) einstellen und trotzdem erwarten, dass die Ansicht zu meiner Eingabe scrollt?
Wenn ich das Scrollen deaktiviere, wird die Statusleiste nicht mehr herausgeschoben, sondern die Tastatur überlappt mein Eingabefeld.

@michaelknoch solange sich Ihre Eingabe in einer Scroll-Ansicht befindet (wie ion-content), sollte sie automatisch in die Ansicht scrollen, es sei denn, Sie haben ionic.keyboard.disable() aufgerufen.

@michaelknoch, ich glaube, du Keyboard- Attach

@LightZam, aber es unterstützt nur die Ion-Fußzeile und meine Eingabe befindet sich in meinem Inhalt in der Ion-Ansicht

@tlancina soll ich meinen Inhalt mit ionScroll umschließen? http://ionicframework.com/docs/api/directive/ionScroll/

@michaelknoch sollten Sie nicht müssen, da ion-content eine Scroll-Ansicht hat. Wenn Sie einen einfachen Codepen erstellen können, der das Problem reproduziert, zusammen mit dem von Ihnen verwendeten Telefon und Betriebssystem sowie der Ausgabe des Befehls ionic info (wenn Sie die CLI verwenden), nehme ich ein Blick.

@tlancina Ich stehe vor diesem Problem
Cordova CLI: 5.2.0
Ionische Version: 1.1.0
Ionische CLI-Version: 1.6.4
Ionic App Lib Version: 0.3.8
iOS-Bereitstellungsversion: 1.7.0
iOS-Sim-Version: 4.1.1
Betriebssystem: Mac OS X Yosemite
Knotenversion: v0.12.7
Xcode-Version: Xcode 7.0 Build-Version 7A176x
Telefon - iPhone 4S, iOS 7.0.6

Wenn ich den Header "cordova.plugins.Keyboard.disableScroll(true)" behalte, drücke ihn nicht heraus, aber die Tastatur kommt oben auf meinen Textbereich. und ich habe den textarea (mit msd-elastic) drinnen behalten, um einen ähnlichen Stil wie WhatsApp zu erhalten, also seinen äußeren Ionengehalt

und wenn ich keyboard-attach benutze, dann vermasselt es mit msd-elastic :(
irgendwelche Vorschläge ?

versucht mit ionic.Platform.fullScreen()
aber kein glück... auch dieser fullScreen() erzeugt ein weiteres problem in ios...
es reduziert die Höhe des Headers... da dieses CSS nicht angewendet wird, wenn Sie fullscreen() aufrufen
.platform-ios.platform- cordova:not (.fullscreen) .bar- header:not (.bar-subheader) {height: 64px; }

In Android war alles in Ordnung.

Ich habe nach dem Upgrade von Cordova auf 6.0.0 fast das gleiche Problem, nämlich die Statusleiste wird angezeigt und überlappt die Kopfzeilenleiste, wenn das Formularfeld fokussiert ist. Dieses Problem besteht auf meinem Android-Gerät. iOS-Gerät habe ich noch nicht ausprobiert. Kann jemand bitte helfen?

Cordova CLI: 6.0.0
Gulp-Version: CLI-Version 3.8.11
Gulp local: Lokale Version 3.8.11
Ionische Version: 1.0.0-rc.5
Ionische CLI-Version: 1.7.14
Ionic App Lib Version: 0.7.0
iOS-Bereitstellungsversion: 1.8.3
iOS-Sim-Version: 5.0.4
Betriebssystem: Mac OS X El Capitan
Knotenversion: v0.12.2
Xcode-Version: Xcode 7.2 Build-Version 7C68

Ich hatte dieses Problem auf Android nach dem Upgrade auf Cordova 6.0.0 und habe es durch Aufrufen der AndroidFullScreen.immersiveMode-Methode des Plugins https://github.com/mesmotronic/cordova-plugin-fullscreen gelöst

// System-UI ausblenden und versteckt halten (nur Android 4.4+)
AndroidFullScreen.immersiveMode(successFunction, errorFunction);

Dieses Problem tritt immer noch auf, es ist keine geeignete Lösung, es im Vollbildmodus zu lösen, da die App nicht wirklich im Vollbildmodus ausgeführt werden sollte, aber nur für den Test habe ich es ausprobiert, und während die App in den Vollbildmodus wechselt, ist sie es immer noch "größer" als der Bildschirm, daher können Sie mit der Kopfzeile unter der Statusleiste ein wenig scrollen ...
Bitte helfen Sie!

Haben Sie dieses Problem? Gibt es eine Umgehung?

Habe auch das gleiche Problem mit iOS in Ionic 2

Umfeld
Cordova CLI: 6.0.0
Ionische Version: 2.0.0-beta.3
Ionic CLI-Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy-Version: Nicht installiert
iOS-Sim-Version: 5.0.6
Betriebssystem: Mac OS X El Capitan
Knotenversion: v5.7.1
Xcode-Version: Xcode 7.2.1 Build-Version 7C1002

Wie Sie sehen, gibt es in der Ionic-App keinen Raum/Abstand zwischen der Statusleiste und der Kopfzeile.

Neues/altes Problem mit der Tastatur ist wieder da. Während ich das Scrollen deaktivieren kann, wenn die Eingabe durch Tippen fokussiert wird, ist das alte Problem mit dem Scrollen der Kopfzeile aus der Sicht wieder vorhanden, wenn Formularfelder mit der speziellen Schaltfläche der virtuellen Tastatur fokussiert werden. Auf der Android-Tastatur befindet sich unten rechts eine grüne Schaltfläche, mit der Sie zur nächsten Eingabe im Formular wechseln können. Auch wenn ich das Scrollen deaktiviert habe, scrollt die Schaltfläche die Ansicht, um fokussierte Eingaben sichtbar zu machen und als Ergebnis ist die Kopfzeile außerhalb des Bildschirms.

Um dies zu testen, muss sich die erste Eingabe in der Ansicht befinden und mit sichtbarer Tastatur fokussiert sein und die zweite Eingabe muss sich unterhalb des Falzes (irgendwo unter der Tastatur) befinden. Wenn Sie nun auf die grüne Schaltfläche tippen (wie im Bild), wird die Ansicht gescrollt und die Kopfzeile wird vom Bildschirm ausgeblendet.

Cordova 6.3.0
ionic-plugin-tastatur 2.2.1
Getestet auf Gerät mit Android 5
Build für Android 24.0.1

Haben Sie Ideen, um diese Schaltfläche zu deaktivieren oder das Problem zu beheben? Ich bin mir nicht 100% sicher, aber ich vermute, dass dies nach dem Cordova-Upgrade auf eine 6+-Version begann.

@rafaellop Haben Sie dieses Problem gelöst?

Dieses Problem tritt auf, wenn der Datei-Upload vom Telefon-/Kamera-Bildschirm unter iOS geöffnet wird.

Ich habe dieses Problem mit dem E-Mail-Composer

Bearbeiten Für diejenigen, die dieses Problem auch nach dem Ausprobieren immer noch haben, versuchen Sie, zu [email protected] zurückzukehren. Es scheint, als hätte 4.3 ein seltsames Verhalten eingeführt. Selbst die neuesten Cordova-ios-Nachtlieder schienen mein Problem nicht zu beheben, aber das Zurücksetzen hat es sofort behoben.

Dieses Problem tritt bei mir auch immer noch auf, es ist nicht behoben.

Wenn wir in IOS auf die Statusleiste tippen, blinkt der gesamte Ioneninhalt in IONIC2. So beheben Sie dieses Problem. Bitte schlagen Sie vor.
Danke schön.

Das Zurückkehren zu leider nicht geholfen. Gleiches Problem nach Verwendung der nativen Kamera-Dateibibliothek.

Ich habe gerade aus einem anderen Beitrag festgestellt, dass ich das Cordova-Statusbar-Plug-In von 2.2.1 auf 2.2.0 downgraden konnte und das Problem behoben wurde. In meinem Fall scheint es das Statusbar-Plugin zu sein, das das Problem verursacht hat.

Ich hatte dieses Problem mit

• ionisch 3.9.2
• Cordova-ios 4.4.0
• iOS 10.3
• Eine Auswahl an iPhone-Geräten und Emulatoren

Ich hatte einen Textbereich mit height: 100%; (der nur aus Ioneninhalt bestand) und der Ionenkopf verkleinerte sich immer dann, wenn der Textbereich fokussiert war. Meine Lösung bestand darin, es in height: auto; min-height: 25%; zu ändern und den Textbereich in ein div mit height: 100%; margin: 0; padding: 0; und (click)=focusTextArea() . Ein bisschen janky und ich würde eine bessere Lösung lieben, aber das funktioniert im Moment in Ordnung :+1:

Bitte verwenden Sie dieses Plugin ionic Cordova Plugin Cordova-plugin-ionic-webview hinzufügen --save. Es hat mein Problem gelöst danke

Ich hatte das gleiche Problem in Kombination mit dem E-Mail-Composer-Plugin.

Ich habe das Problem gelöst, indem ich die cordova-plugin-statusbar von Version 2.2.1 auf 2.3.0 aktualisiert habe.

@jvhe123 Ich habe es gerade versucht, aber es sieht so aus, als ob v2.3.0 nicht existiert, meinst du v2.2.3?

@glenr4

• Cordova-Plugin-Tastatur 1.2.0
• ionic-plugin-tastatur 2.2.1

Ich hatte dieses Problem für das iPhone X. Das Öffnen der Tastatur drückte die Kopfzeile nach oben und fast von der Seite.

Ich habe es behoben, indem ich einen eventListener in meine Javascript-Datei für die betroffene Seite eingefügt habe:

document.addEventListener('deviceready', function(e){ window.addEventListener('native.keyboardshow', function () { cordova.plugins.Keyboard.disableScroll(true); }); });

Das hat bei mir funktioniert, hoffentlich kann es auch bei einem von euch funktionieren.

Danke für das Problem! Dieses Problem wird gesperrt, um Kommentare zu verhindern, die für das ursprüngliche Problem nicht relevant sind. Wenn dies immer noch ein Problem mit der neuesten Version von Ionic ist, erstellen Sie bitte ein neues Problem und stellen Sie sicher, dass die Vorlage vollständig ausgefüllt ist.