Ionic-framework: La barre d'en-tête se déplace derrière la barre d'état ou même complètement hors de la fenêtre lorsque le champ de formulaire est mis au point

Duplicata du #818

Merci. Nous travaillons sur ces bugs de clavier pour la bêta2.

Avez-vous une piste sur ce qui pourrait causer cela?
Au moment où vous prévoyez de sortir la version bêta2, mon application est déjà dans la nature ;-)

Voici une démonstration de travail de ce problème:

Je viens de tester cela via le processus "Getting Started" en utilisant "Ionic, v1.0.0-beta.1".

Mes pas:

• npm install -g cordova ionique
• ionic start statusBarTest menu latéral
• plate-forme ionique ajouter ios

J'ai ensuite modifié app.js pour commencer avec un formulaire simple. :

<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>

Puis:

• ios de construction ionique
• émuler ionique ios

Voici le résultat :

Comme vous pouvez le voir, le clavier pousse le formulaire vers le haut dans la barre d'état.

Hé Justin, je crois que le problème est que

Essayez-le et dites-moi si cela vous aide.

Le mer. 2 avril 2014 à 16h34, Justin Noel [email protected] a écrit :

Voici une démonstration de travail de ce problème:

Je viens de tester cela via le processus "Getting Started" en utilisant "Ionic,
v1.0.0-beta.1".

Mes pas:

• npm install -g cordova ionique
• ionic start statusBarTest menu latéral
• plate-forme ionique ajouter ios

J'ai ensuite édité app.js pour commencer avec un formulaire simple. :

<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>

Puis:

• ios de construction ionique
• émuler ionique ios

Voici le résultat :

[image : problème de barre d'état] https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

Comme vous pouvez le voir, le clavier pousse le formulaire vers le haut dans la barre d'état.

Répondez directement à cet e-mail ou consultez-le sur Gi tHubhttps://github.com/driftyco/ionic/issues/932#issuecomment -39386769
.

Malheureusement, cela n'a pas aidé. Dans l'exemple de projet, j'ai ajouté ceci au "style.css":

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

Cela n'a pas fonctionné même si "style.css" est inclus après le fichier CSS Ionic. J'ai également confirmé dans le débogage de Safari que le position: static avait été appliqué au corps.

Donc, j'ai ensuite essayé juste le corps sans succès.

body {
    position: static;
}

Ensuite, je viens de mettre à jour le fichier "ionic.css". Cela n'a toujours pas fonctionné.

J'ai également pensé que vous vouliez peut-être rendre l'en-tête statique ; alors je l'ai essayé. Pas de chance avec ça non plus.

Ah je n'ai pas vu que c'est uniquement iOS 7.1. Je n'ai pas accès à un Mac pour le moment, donc je vais jeter un œil demain. Merci pour votre aide dans cette recherche.

Merci pour la démo de travail Justin :+1:

Selon votre configuration, régler .body sur position:static ne résoudra rien, car .pane et .view ont également une position absolue.

Dans les applications Web mobiles personnalisées que j'ai créées, l'en-tête doit être en dehors de l'un de ces éléments fortement positionnés et l'en-tête lui-même doit être défini sur position:fixed pour y rester lorsque le clavier est activé. Android a une option appelée adjust-resize qui écrase la vue pour qu'elle s'adapte au-dessus du clavier. iOS, d'autre part, fait simplement un panoramique de la vue pour centrer l'entrée sur l'écran.

Cordova a également une préférence appelée "KeyboardShrinksView" qui est par défaut fausse. Je n'ai pas encore regardé cela mais cela ressemble à une solution pour iOS à ce qu'Android fait déjà avec ajuster-redimensionner

Créer une harmonie entre ces deux différences est un ENFER d'un travail

Nous travaillons activement sur des corrections de clavier maintenant pour arrêter tous ces problèmes.

Ce bug n'est malheureusement pas corrigé dans nightly 1717.

Une chose que @tlancina a remarquée est qu'avec les dernières corrections de tapotement, si vous cliquez directement sur l'entrée, cela ne déplace pas l'en-tête vers le haut. Je pense donc que nous avons résolu une partie de ce problème. Cependant, si vous appuyez sur l'étiquette qui enveloppe une entrée, 300 ms plus tard, il fera le défilement natif laid. La façon dont le css Ionic par défaut fonctionne, il est difficile de faire la différence entre l'étiquette d'emballage et l'entrée réelle, donc cela pourrait être en partie la raison pour laquelle cela ne fonctionne pas toujours. J'ai utilisé cette page de test pour aider à déboguer ces problèmes sur chaque appareil.

Pour le moment, je pense que la raison en est que nous n'empêchons pas la valeur par défaut d'un clic sur une étiquette. Si nous faisons e.preventDefault() sur une étiquette enveloppant une entrée, le clavier ne s'affichera pas automatiquement au premier appui. Je vais étudier ça plus en détail, merci.

@adamdbradley se portant volontaire comme autre testeur pour ce correctif lorsqu'il entre dans les nightlies. THX.

Malheureusement, ce problème n'est pas encore résolu dans la version 1.0.0 beta2.

@CoenWarmer Nous sommes conscients des problèmes et y travaillons toujours. N'oubliez pas non plus que lorsque vous signalez des problèmes de clavier, veuillez indiquer la plate-forme, la version de la plate-forme et le problème dans le navigateur mobile, l'émulateur ou dans cordova, et s'il s'agit de cordova, est-il en plein écran ou non. D'autres informations utiles incluent l'élément que vous avez tapé, tel que l'étiquette ou l'entrée, avez-vous dû faire défiler manuellement à tout moment pour accéder à une entrée, la méta viewport a-t-elle ou non hauteur = hauteur de l'appareil, et si l'élément est en dessous de l'endroit où le clavier virtuel s'afficherait éventuellement, est-ce qu'il montre à moitié l'endroit où le clavier s'afficherait, ou est-il au-dessus et pas besoin de faire défiler. Merci

Rencontré le :

• iOS7.1.1
• Ionique 1.0.0 bêta 2
• à Cordoue
• dans simulateur et appareil
• pas plein écran
• aucune étiquette utilisée, seulement entrée
• la vue peut défiler une fois que le champ de saisie a obtenu le focus, si le champ de saisie n'a pas de focus, la vue ne peut pas défiler
• la vue ne défile pas immédiatement après avoir obtenu le focus et le clavier apparaît. Lorsque le champ de saisie obtient le focus, vous pouvez alors placer votre doigt sur le champ de saisie et faire glisser vers le haut pour déplacer la vue hors de la vue Web.

Se produit également sur Android 4.4 et 4.3, en utilisant également 1.0.0 beta2. Exactement les mêmes circonstances que iOS7.1. Ainsi, lorsque le champ de saisie obtient le focus et que le clavier apparaît, tout va bien, c'est lorsque l'entrée obtient le focus et que vous placez ensuite votre doigt sur le champ de saisie et commencez à le faire glisser vers le haut ou vers le bas, c'est à ce moment-là que vous pouvez déplacer tout le contenu hors de la vue . Fera un screencast plus tard.

Capture d'écran : https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

Après beta2 j'ai ce problème sur les petits écrans (comme iphone3 ou iphone4).

iphone 5 (d'accord)

iphone 4 (problèmes)

@zelphir Pouvez-vous s'il vous plaît fournir un codepen qui reproduit ce problème ? Sont-ils tous les deux iOS 7.0 ou 7.1 ?

@CoenWarmer est votre contribution dans un domaine de contenu par hasard ? La seule façon pour moi de reproduire votre problème est d'avoir une entrée qui n'est pas dans une vue de défilement.

Juste pour clarifier - c'est le comportement attendu si vous n'utilisez pas une vue de défilement. S'il y a des entrées sous le clavier et que vous ne pouvez pas les faire défiler à l'aide de JS, le navigateur est obligé de déplacer le contenu vers le haut pour qu'ils soient visibles, c'est pourquoi vous pouvez tout déplacer vers le haut.

@tlancina Mon entrée n'est pas dans une zone de contenu.

Voici le code que j'utilise :

<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>

Je ne suis pas sûr de suivre entièrement ce que vous dites à propos de ce comportement attendu. À l'heure actuelle, il semble que l'application se brise lorsque tout défile sous l'en-tête. Dois-je plutôt placer le champ de saisie dans un contenu ionique ?

Eh bien, supposons que vous ayez une liste de plusieurs entrées, atteignant le bas de votre page. S'ils ne se trouvent pas dans une zone pouvant être parcourue à l'aide de Javascript, comment peuvent-ils être affichés lorsque le clavier s'affiche ? Le seul moyen est d'utiliser le défilement natif du navigateur, qui fonctionne en déplaçant le contenu - tout, y compris l'en-tête.

Lorsqu'une zone d'entrée ou de focalisation se trouve dans une vue de défilement ionique, nous empêchons le défilement par défaut et utilisons Javascript pour l'afficher, en laissant l'en-tête en place.

Je ne suis malheureusement pas un expert des routeurs ui, mais essayez de placer le contenu ionique autour de tout le contenu de la page et voyez si cela vous aide.

Je comprends maintenant, mais cela n'entraîne-t-il pas l'effet visuel indésirable de la disparition de toute la barre de navigation, y compris le bouton de retour ?

Plus précisément dans mon cas d'utilisation, si je place le champ de saisie dans un contenu ionique, comment puis-je m'assurer qu'ils restent fixés en haut sous la barre d'en-tête de manière à ce que les animations de transition fonctionnent correctement sur iOS et Android ?

Oui, la situation de jongler avec les onglets et de maintenir une zone de défilement pour une entrée semble assez délicate, et cela ne manquera pas de se produire assez souvent. @adamdbradley et moi l'examinons en ce moment.

Je ne suis pas sûr de comprendre le problème des transitions, si vous faites quelque chose comme

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

ça gâche les animations ? Il est tout à fait possible que le fait d'avoir plusieurs zones de contenu gâche d'autres choses, car l'hypothèse est probablement qu'il n'y en a qu'une.

@tlancina Ah super, je n'ai pas envisagé d'utiliser deux éléments à contenu ionique dans un partiel. Je verrai comment ça marche et je ferai un retour.

Le problème avec les animations de transition auquel je faisais référence se produit sur certaines versions d'Android. Si vous utilisez position: static sur un élément et que vous vous éloignez de cette vue, sur Android 4.1 à 4.3 (je crois, je ne suis pas sûr à 100%, je le vérifierai), ces éléments resteront verrouillés une fois l'animation commencée. Ainsi, tous les éléments (contenu ionique, onglets, barres d'en-tête, etc.) commenceront à se déplacer vers la gauche, mais l'élément que vous avez donné la position : statique restera au même endroit jusqu'à ce que l'animation se termine. Cela n'arrive pas sur iOS. C'est pourquoi j'hésitais à utiliser la position statique n'importe où.

@tlancina J'ai juste essayé de mettre l'élément d'entrée dans un contenu ionique et d'avoir le reste du contenu dans un autre, deuxième contenu ionique. Malheureusement, toute entrée entrée dans l'élément d'entrée ne filtrera plus le ng-repeat qui se trouve dans l'autre contenu ionique. D'autres suggestions ?

@CoenWarmer c'est parce que le contenu ionique crée une portée enfant.

Essayez de mettre un contrôleur sur les deux contenus. Si le contrôleur l'est, n'utilisez pas simplement une primitive pour l'entrée.

Vous souffrez du problème « du point » de l'héritage de portée - une primitive dans une portée enfant différente est définie sur la portée enfant, pas sur la portée parent. Tu vois ce que je veux dire? Si vous ne le faites pas, laissez-moi savoir et je vais trouver un lien / l'expliquer.

Je ne le connais pas, malheureusement non. Se soucier de partager? :)

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

Ah oui, c'est logique ! Je vais recommencer :+1:

salut @adam. Que diriez-vous d'un pied de page avec une entrée? Comme c'est en dehors de la zone de défilement, cela va également causer le problème. Un moyen de contourner cela?

J'ai aussi ce problème sur iPad (7.1). J'ai vu que ionic ajoute height=device-height à la fenêtre d'affichage après les modifications récentes s'il n'est pas défini.
En raison de cette propriété, la fenêtre d'affichage atteint environ 200 pixels (hauteur) et est complètement défilante.
Quand je l'enlève ça marche.
Je peux résoudre ce problème si d'une manière ou d'une autre si je définis .view et .pane sur position: fixed et body to position: static, mais la fenêtre principale est toujours trop grande et affiche une barre de défilement sur le côté droit si je déplace le doigt de haut en bas.

Soit dit en passant ... cela est indépendant du focus d'entrée. Le focus d'entrée ne déplace que la position de défilement afin que vous puissiez voir le résultat.

Hé les gars, quels sont les progrès actuels ici?
J'ai créé un fichier ionique personnalisé et j'ai supprimé l'ajout « height=device-height » de celui-ci.
Après ce changement tout fonctionne bien. Aucun correctif CSS n'est plus nécessaire et la mise au point sur le champ de saisie fonctionne correctement.
J'utilise également le plugin Keyboard sur iOS et procède comme suit :

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

Le fait de placer l'entrée dans un contenu ionique séparé n'arrête pas non plus le comportement consistant à rendre la vue entière, y compris la barre d'en-tête défilante sous la vue Web lorsque l'entrée obtient le focus. Le même comportement se produit que dans mon précédent screencast : https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

@D3CK3R, nous travaillons à

@CoenWarmer voudriez-vous plug -

Vous pouvez l'installer en exécutant cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git depuis votre projet Cordova.

@tlancina Ça marche ! Après avoir ajouté le plugin, le contenu n'est plus déplaçable sous la fenêtre lorsque l'entrée a le focus. Impressionnant!!

Le plugin est-il prêt pour la production ? Je serais ravi de déployer cela dès que possible puisque ce projet vient d'être publié sur le magasin.

@CoenWarmer, vous n'avez aucune idée à quel point j'étais heureux de voir votre dernier commentaire ! Super travail @tlancina !

@adamdbradley @tlancina

Oui!!!

@CoenWarmer oui pour iOS, il est prêt pour la production. Nous en avons une version antérieure dans une application qui vient d'être acceptée dans l'App Store, et je ne pense pas que les éléments de défilement que nous avons ajoutés soient une cause de rejet. Vraiment content que ça marche pour toi !

Bon pour fermer? @tlancina

C'était toujours un problème dans la version bêta14. Après un débogage approfondi, j'ai enfin trouvé le correctif.

Dans mon cas, c'était lié à mon meta viewport .

Valeur d'origine (provoquant l'affichage de l'en-tête derrière la barre d'état)

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

Nouvelle valeur (résolution de ce problème)

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

J'ai commencé mon projet waaaay avant beta1 donc c'était probablement un ancien HTML que je n'avais jamais remarqué.

J'espère que cela aide quelqu'un.

@rvanbaalen J'ai une meta

C'est toujours un problème pour moi. J'ai ajouté le plugin clavier. J'essaie d'utiliser une simple zone de texte comme "bloc-notes" afin qu'elle remplisse tout l'écran comme vous pouvez le voir avec ma taille : 100 % styles. Pour que ces styles fonctionnent, j'ai dû désactiver le défilement avec scroll="false" car le style de hauteur ne s'étendra qu'à la hauteur du parent. Il existe probablement une meilleure façon de créer ce "bloc-notes" pour éviter ce problème et j'apprécierais toutes les suggestions.

J'ai ajouté une couleur d'arrière-plan à la zone de texte pour rendre les captures d'écran ci-dessous plus évidentes.

J'utilise cette vue :

<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>

Vue initiale

Après avoir cliqué sur la zone de texte

Démontrer que je peux faire défiler pendant que la zone de texte a le focus.

Toujours un problème les gars, s'il vous plaît aidez @ajoslin @adamdbradley

Simulateur iOS - iPhone 6 / iOS 8.3
version ionique 1.0.0-rc.0
plugins installés :

• com.ionic.keyboard
• 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 à partir du 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
tu devrais essayer

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.

à partir de la note ios du

cela fonctionnera comme un charme.

puis-je définir cordova.plugins.Keyboard.disableScroll (true) et m'attendre toujours à ce que la vue défile jusqu'à mon entrée?
Si je désactive le défilement, la barre d'état n'est plus repoussée, mais le clavier chevauche mon champ de saisie.

@michaelknoch tant que votre entrée se trouve dans une vue de défilement (comme le contenu ionique), elle devrait automatiquement défiler dans la vue, à moins que vous n'ayez appelé ionic.keyboard.disable() .

@michaelknoch je pense que vous demandez l' attache du clavier

@LightZam mais il ne prend en charge que la barre de pied de page ionique et mon entrée est dans mon contenu dans ion-view

@tlancina dois-je envelopper mon contenu avec ionScroll ? http://ionicframework.com/docs/api/directive/ionScroll/

@michaelknoch vous ne devriez pas en avoir besoin, car ion-content a déjà une vue de défilement. Si vous pouvez créer un simple codepen qui reproduit le problème, ainsi que le téléphone et le système d'exploitation que vous utilisez, ainsi que la sortie de la commande ionic info (si vous utilisez la CLI), je vais prendre un regard.

@tlancina Je suis confronté à ce problème sur
Cordoue CLI : 5.2.0
Version ionique : 1.1.0
Version Ionique CLI : 1.6.4
Version de l'application Ionic Lib : 0.3.8
version de déploiement d'ios : 1.7.0
version ios-sim : 4.1.1
Système d'exploitation : Mac OS X Yosemite
Version du nœud : v0.12.7
Version Xcode : Xcode 7.0 Version de construction 7A176x
téléphone - iphone 4S, ios 7.0.6

si je garde l'en-tête "cordova.plugins.Keyboard.disableScroll(true)", ne poussez pas, mais le clavier vient au-dessus de ma zone de texte. et j'ai gardé la zone de texte (en utilisant msd-elastic) à l'intérieur, pour obtenir un style similaire à celui de WhatsApp, donc son contenu ionique extérieur

et si j'utilise l'attache-clavier, alors ça bousille avec msd-elastic :(
Aucune suggestion ?

essayé avec ionic.Platform.fullScreen()
mais pas de chance... aussi ce fullScreen() crée un autre problème dans ios...
cela réduit la hauteur de l'en-tête... car ce css n'est pas appliqué lorsque vous appelez fullscreen()
.platform-ios.platform- cordova :not (.fullscreen) .bar- header:not (.bar-subheader) {height: 64px; }

tout allait bien dans andorid.

J'ai presque le même problème après la mise à niveau de Cordova vers 6.0.0, à savoir que la barre d'état apparaît et chevauche la barre d'en-tête lorsque le champ de formulaire est focalisé. Ce problème existe sur mon appareil Android. Je n'ai pas encore essayé l'appareil iOS. Quelqu'un peut-il aider?

Cordoue CLI : 6.0.0
Version Gulp : CLI version 3.8.11
Gulp local : version locale 3.8.11
Version ionique : 1.0.0-rc.5
Version Ionic CLI : 1.7.14
Version de l'application Ionic Lib : 0.7.0
version de déploiement d'ios : 1.8.3
version ios-sim : 5.0.4
OS : Mac OS X El Capitan
Version du nœud : v0.12.2
Version Xcode : Xcode 7.2 Version de construction 7C68

J'avais ce problème sur Android après la mise à niveau vers Cordova 6.0.0 et je l'ai résolu en appelant la méthode AndroidFullScreen.immersiveMode du plugin https://github.com/mesmotronic/cordova-plugin-fullscreen

// Masquer l'interface utilisateur du système et la garder cachée (Android 4.4+ uniquement)
AndroidFullScreen.immersiveMode(successFunction, errorFunction);

Ce problème se produit toujours, le résoudre en passant en plein écran n'est pas une solution appropriée car l'application ne devrait pas vraiment fonctionner en plein écran, mais juste pour le test, je l'ai essayé, et bien que l'application passe en mode plein écran, c'est toujours "plus grand" que l'écran, vous pouvez donc le faire défiler un peu avec l'entête passant sous la barre d'état...
S'il vous plaît, aidez-vous !

Vous avez ce problème ? Y at-il un travail autour?

Ayant également le même problème avec iOS dans Ionic 2

Environnement
Cordoue CLI : 6.0.0
Version ionique : 2.0.0-beta.3
Version Ionic CLI : 2.0.0-beta.19
Version de l'application Ionic Lib : 2.0.0-beta.9
version ios-deploy : non installée
version ios-sim : 5.0.6
OS : Mac OS X El Capitan
Version du nœud : v5.7.1
Version Xcode : Xcode 7.2.1 Version de construction 7C1002

Comme vous pouvez le voir, il n'y a pas d'espace/de rembourrage entre la barre d'état et l'en-tête dans l'application Ionic.

Le nouveau/ancien problème avec le clavier est à nouveau là. Bien que je puisse désactiver le défilement lorsque la saisie est focalisée par enregistrement, l'ancien problème avec le défilement de l'en-tête hors de vue est à nouveau présent si la focalisation des champs de formulaire avec le bouton spécial du clavier virtuel. Sur le clavier Android, il y a un bouton vert en bas à droite qui permet de passer à la prochaine entrée du formulaire. Même si le défilement est désactivé, le bouton fait défiler la vue pour rendre visibles les entrées ciblées et, par conséquent, l'en-tête est hors de l'écran.

Pour tester cela, la première entrée doit être dans la vue et focalisée avec le clavier visible et la deuxième entrée doit être sous le pli (quelque part sous le clavier). Appuyez maintenant sur le bouton vert (comme sur l'image) pour faire défiler la vue et l'en-tête disparaît de l'écran.

Cordoue 6.3.0
ionic-plugin-keyboard 2.2.1
Testé sur appareil avec Android 5
Construire pour Android 24.0.1

Avez-vous des idées pour désactiver ce bouton ou résoudre le problème ? Je ne suis pas sûr à 100%, mais je soupçonne que cela a commencé après la mise à niveau de Cordova vers une version 6+.

@rafaellop Avez-vous résolu ce problème ?

ce problème apparaît lorsque le téléchargement de fichier à partir de l'écran Téléphone/Appareil photo s'ouvre sur iOS.

J'ai ce problème avec le compositeur d'e-mails

Modifier Pour ceux qui ont toujours ce problème même après avoir tout essayé, essayez de revenir à [email protected]. Il semble que 4.3 ait introduit un comportement étrange. Même les nuits cordova-ios les plus récentes ne semblaient pas résoudre mon problème, mais le retour l'a résolu.

Ce problème est toujours présent pour moi aussi, ce n'est pas résolu.

Dans IOS, si nous tapons sur la barre d'état, tout le contenu ionique clignotera dans IONIC2. Comment résoudre ce problème. Veuillez suggérer ..
Merci.

Revenir à [email protected] ne m'a pas aidé, c'est triste à dire. Même problème après avoir utilisé la bibliothèque de fichiers de caméra native.

Je viens de réaliser à partir d'un autre article que j'ai pu rétrograder le plug-in cordova-statusbar de 2.2.1 à 2.2.0 et cela a résolu le problème. On dirait que c'est le plugin de la barre d'état qui a causé le problème dans mon cas.

j'ai eu ce problème avec

• ionique 3.9.2
• cordoue-ios 4.4.0
• iOS 10.3
• Un assortiment d'appareils et d'émulateurs iPhone

J'avais une zone de texte avec height: 100%; (qui contenait tout le contenu ionique) et l'en-tête ionique faisait un zoom arrière chaque fois que la zone de texte était focalisée. Ma solution consistait à le changer en height: auto; min-height: 25%; et à mettre la zone de texte dans un div avec height: 100%; margin: 0; padding: 0; et (click)=focusTextArea() . Un peu janky et j'aimerais une meilleure solution mais cela fonctionne bien pour l'instant :+1:

Veuillez utiliser ce plugin ionic cordova plugin add cordova-plugin-ionic-webview --save. C'est résolu mon problème merci

J'ai rencontré le même problème en combinaison avec le plugin email-composer.

J'ai résolu le problème en mettant à niveau le cordova-plugin-statusbar de la version 2.2.1 à la 2.3.0.

@jvhe123 Je viens d'essayer de le faire mais il semble que la v2.3.0 n'existe pas, voulez-vous dire la v2.2.3?

@glenr4

• cordova-plugin-keyboard 1.2.0
• ionic-plugin-keyboard 2.2.1

J'avais ce problème pour l'iPhone X. L'ouverture du clavier a poussé l'en-tête vers le haut et presque hors de la page.

Je l'ai corrigé en mettant un eventListener dans mon fichier javaScript pour la page affectée :

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

Cela a fonctionné pour moi, j'espère que cela peut fonctionner pour l'un d'entre vous aussi.

Merci pour le problème ! Ce problème est verrouillé pour empêcher les commentaires qui ne sont pas pertinents pour le problème d'origine. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.