Ionic-framework: Bilah tajuk bergerak ke atas di belakang bilah status atau bahkan sepenuhnya keluar dari area pandang saat bidang formulir difokuskan

Duplikat #818

Terima kasih. Kami sedang mengerjakan bug keyboard ini untuk beta2.

Apakah Anda memiliki petunjuk tentang apa yang mungkin menyebabkan ini?
Pada saat Anda berencana untuk merilis beta2, aplikasi saya sudah keluar di alam liar ;-)

Berikut ini adalah demonstrasi kerja dari masalah ini:

Saya baru saja menguji ini melalui proses "Memulai" menggunakan "Ionic, v1.0.0-beta.1".

Langkah Saya:

• npm install -g cordova ionic
• status awal ionikBarTest sidemenu
• platform ionik tambahkan ios

Saya kemudian mengedit app.js untuk memulai dengan formulir sederhana. :

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

Kemudian:

• ion membangun ios
• ionik meniru ios

Inilah hasilnya:

Seperti yang Anda lihat, keyboard mendorong formulir ke atas ke bilah status.

Hei Justin, saya yakin masalahnya adalah itu

Cobalah dan beri tahu saya jika itu membantu.

Pada hari Rabu, 2 April 2014 jam 16.34, Justin Noel [email protected] menulis :

Berikut ini adalah demonstrasi kerja dari masalah ini:

Saya baru saja menguji ini melalui proses "Memulai" menggunakan "Ionic,
v1.0.0-beta.1".

Langkah Saya:

• npm install -g cordova ionic
• status awal ionikBarTest sidemenu
• platform ionik tambahkan ios

Saya kemudian mengedit app.js untuk memulai dengan formulir sederhana. :

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

Kemudian:

• ion membangun ios
• ionik meniru ios

Inilah hasilnya:

[gambar: masalah bilah status] https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

Seperti yang Anda lihat, keyboard mendorong formulir ke atas ke bilah status.

Balas email ini secara langsung atau lihat di Gi tHubhttps://github.com/driftyco/ionic/issues/932#issuecomment -39386769
.

Sayangnya, itu tidak membantu. Dalam contoh proyek, saya menambahkan ini ke "style.css":

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

Itu tidak berhasil meskipun "style.css" disertakan setelah file CSS Ionic. Saya juga mengonfirmasi dalam debug Safari bahwa position: static telah diterapkan ke badan.

Jadi, saya kemudian mencoba hanya tubuh tanpa hasil.

body {
    position: static;
}

Selanjutnya, saya baru saja memperbarui file "ionic.css". Ini masih tidak berhasil.

Saya juga berpikir Anda mungkin bermaksud membuat header statis; jadi saya mencobanya. Tidak beruntung dengan itu juga.

Ah tidak melihatnya hanya iOS 7.1. Saya tidak memiliki akses ke Mac sekarang, jadi saya akan memeriksanya besok. Terima kasih atas bantuan Anda untuk menyelidiki ini.

Terima kasih atas demo kerja Justin :+1:

Bergantung pada pengaturan Anda, menyetel .body ke position:static tidak akan memperbaiki apa pun, karena .pane dan .view juga memiliki posisi absolut.

Dalam aplikasi web seluler khusus yang saya buat, tajuk harus berada di luar salah satu dari elemen posisi berat ini dan tajuk itu sendiri disetel ke position:fixed untuk tetap di sana saat keyboard menyala. Android memiliki opsi yang disebut adjust-resize yang menekan tampilan agar pas di atas keyboard. iOS di sisi lain, hanya menggeser tampilan untuk memusatkan input di layar.

Cordova juga memiliki preferensi yang disebut "KeyboardShrinksView" yang disetel ke false. Saya belum melihat ini tetapi sepertinya solusi untuk iOS untuk apa yang sudah dilakukan Android dengan menyesuaikan-mengubah ukuran

Menciptakan keselarasan antara kedua perbedaan ini adalah salah satu pekerjaan yang NERAKA

Kami secara aktif bekerja pada perbaikan keyboard sekarang untuk menghentikan semua masalah ini.

Bug ini sayangnya tidak diperbaiki di nightly 1717.

Satu hal yang diperhatikan oleh @tlancina adalah dengan perbaikan tap terbaru, jika Anda mengklik input secara langsung, header tidak akan naik. Jadi saya pikir kami memecahkan sebagian dari masalah ini. Namun, jika Anda mengetuk label yang membungkus input, 300 ms kemudian akan melakukan scroll asli yang jelek. Cara kerja css Ionic default sulit untuk membedakan antara label pembungkus dan input yang sebenarnya, jadi ini mungkin menjadi bagian dari alasan mengapa itu tidak selalu berhasil. Saya telah menggunakan halaman pengujian ini untuk membantu men-debug masalah ini di setiap perangkat.

Saat ini saya pikir alasannya adalah karena kami tidak mencegah default pada klik label. Jika kita melakukan e.preventDefault() pada label yang membungkus input maka keyboard tidak akan muncul secara otomatis pada ketukan pertama. Saya akan menyelidiki ini lebih lanjut, terima kasih.

@adamdbradley menjadi sukarelawan sebagai penguji lain untuk perbaikan ini ketika masuk ke nightlies. Terima kasih.

Sayangnya masalah ini belum teratasi di 1.0.0 beta2.

@CoenWarmer Kami menyadari masalah ini dan masih mengerjakannya. Juga, perlu diingat bahwa ketika melaporkan masalah keyboard apa pun, harap berikan platform, versi platform, dan apakah masalahnya di browser seluler, emulator, atau di cordova, dan jika itu cordova, apakah itu layar penuh atau tidak. Informasi berguna lainnya termasuk elemen yang Anda ketuk, seperti label atau input, apakah Anda harus menggulir secara manual kapan saja untuk mendapatkan input, apakah viewport meta memiliki height=device-height atau tidak, dan apakah elemen tersebut di bawah di mana keyboard virtual akhirnya akan ditampilkan, apakah itu setengah menunjukkan di mana keyboard akan ditampilkan, atau di atas dan tidak perlu menggulir. Terima kasih

Ditemukan pada:

• iOS7.1.1
• Ionik 1.0.0 beta 2
• di Kordoba
• dalam simulator dan perangkat
• bukan layar penuh
• tidak ada label yang digunakan, hanya input
• tampilan dapat digulir setelah bidang input mendapat fokus, jika bidang input tidak fokus, tampilan tidak dapat digulir
• tampilan tidak langsung bergulir setelah mendapat fokus dan keyboard muncul. Saat bidang masukan mendapat fokus, Anda kemudian dapat meletakkan jari Anda di bidang masukan dan menyeret ke atas untuk memindahkan tampilan keluar dari tampilan web.

Juga terjadi pada Android 4.4 dan 4.3, juga menggunakan 1.0.0 beta2. Keadaan yang sama persis seperti iOS7.1. Jadi ketika bidang input menjadi fokus dan keyboard muncul, tidak ada yang salah, itu adalah saat input menjadi fokus dan Anda kemudian meletakkan jari Anda di bidang input dan mulai menyeretnya ke atas atau ke bawah saat itulah Anda dapat memindahkan semua konten keluar dari tampilan . Akan membuat screencast nanti.

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

Setelah beta2 saya memiliki masalah ini pada layar kecil (seperti iphone3 atau iphone4).

iphone 5 (oke)

iphone 4 (masalah)

@zelphir Bisakah Anda memberikan codepen yang mereplikasi masalah ini? Apakah keduanya iOS 7.0, atau 7.1?

@CoenWarmer apakah input Anda di area konten secara kebetulan? Satu-satunya cara saya dapat mereplikasi masalah Anda adalah dengan memiliki input yang tidak ada dalam tampilan gulir.

Hanya untuk memperjelas - ini adalah perilaku yang diharapkan jika Anda tidak menggunakan tampilan gulir. Jika ada input di bawah keyboard, dan Anda tidak dapat menggulirnya menggunakan JS, maka browser terpaksa menggeser konten ke atas agar terlihat, itulah sebabnya Anda dapat memindahkan semuanya ke atas.

@tlancina Masukan saya tidak berada dalam area konten.

Ini adalah kode yang saya gunakan:

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

Saya tidak yakin saya sepenuhnya mengikuti apa yang Anda katakan tentang ini sebagai perilaku yang diharapkan. Saat ini sepertinya aplikasi sedang rusak ketika semuanya bergulir di bawah tajuk. Haruskah saya menempatkan bidang input di dalam konten ion?

Nah misalkan Anda memiliki daftar beberapa input, mencapai bagian bawah halaman Anda. Jika mereka tidak berada dalam area yang dapat digulir menggunakan Javascript, bagaimana mereka dapat ditampilkan saat keyboard muncul? Satu-satunya cara adalah menggunakan pengguliran browser asli, yang bekerja dengan menggeser konten - semuanya, termasuk header.

Saat input atau area yang dapat difokuskan berada dalam tampilan gulir ionik, kami mencegah pengguliran default dan menggunakan Javascript untuk menampilkannya, membiarkan header tetap di tempatnya.

Sayangnya, saya bukan ahli ui-router, tetapi coba tempatkan konten ion di sekitar semua konten di halaman dan lihat apakah itu membantu.

Saya mengerti sekarang - tetapi bukankah itu mengarah pada efek visual yang tidak diinginkan dari seluruh bilah navigasi menghilang termasuk tombol kembali?

Lebih penting lagi dalam kasus penggunaan saya, jika saya meletakkan bidang input dalam konten ion, bagaimana saya bisa memastikan mereka tetap berada di bagian atas di bawah bilah header dengan cara animasi transisi berfungsi dengan benar di iOS dan Android?

Ya, situasi menyulap tab dan mempertahankan area yang dapat digulir untuk input tampaknya cukup rumit, dan yang pasti sering terjadi. @adamdbradley dan saya sedang menyelidikinya sekarang.

Tidak yakin saya memahami masalah dengan transisi, jika Anda melakukan sesuatu seperti

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

apakah itu mengacaukan animasi? Sangat mungkin memiliki beberapa area konten akan mengacaukan hal-hal lain, karena asumsinya mungkin hanya ada satu.

@tlancina Ah bagus, saya tidak mempertimbangkan untuk menggunakan dua elemen konten ion dalam satu bagian. Akan melihat cara kerjanya dan melaporkan kembali.

Masalah dengan animasi transisi yang saya maksud terjadi pada versi Android tertentu. Jika Anda menggunakan position: static pada suatu elemen dan Anda beralih dari tampilan itu, pada Android 4.1 ke 4.3 (saya yakin, tidak 100% yakin, akan memeriksa) elemen tersebut akan tetap terkunci setelah animasi dimulai. Jadi semua elemen (konten ion, tab, bilah header, dll) akan mulai bergerak ke kiri, tetapi elemen yang Anda berikan position: static akan tetap di tempat yang sama hingga animasi selesai. Ini tidak terjadi di iOS. Inilah mengapa saya ragu untuk menggunakan posisi statis di mana saja.

@tlancina Baru saja mencoba menempatkan elemen input dalam satu konten ion, dan memiliki konten lainnya di konten ion kedua lainnya. Sayangnya input apa pun yang dimasukkan dalam elemen input sekarang tidak akan lagi memfilter ng-repeat yang ada di konten ion lainnya. Saran lain?

@CoenWarmer itu karena ion-content membuat ruang lingkup anak.

Coba letakkan pengontrol di kedua konten. Jika pengontrolnya, maka jangan hanya menggunakan primitif untuk input.

Anda mengalami masalah 'titik' warisan ruang lingkup - primitif dalam ruang lingkup anak yang berbeda sedang diatur pada ruang lingkup anak, bukan pada ruang lingkup induk. Apa kamu tau maksud saya? Jika tidak, beri tahu saya dan saya akan menemukan tautan / menjelaskannya.

Tidak akrab dengannya, sayangnya tidak. Peduli untuk berbagi? :)

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

Ah, ya, itu masuk akal! Akan mencobanya lagi :+1:

hai @adam. Bagaimana dengan footer dengan input? Karena itu di luar area gulir, itu akan menyebabkan masalah juga. Ada cara untuk menghindarinya?

Saya juga memiliki masalah ini di iPad (7.1). Saya melihat bahwa ionic menambahkan height=device-height ke viewport setelah perubahan terbaru jika tidak disetel.
Karena properti ini, area pandang menjadi sekitar 200px (tinggi) menjadi besar dan dapat digulir sepenuhnya.
Ketika saya menghapusnya berfungsi.
Saya dapat memperbaiki ini jika entah bagaimana jika saya mengatur .view dan .pane ke position: fixed dan body ke position: static, tetapi viewport utama masih terlalu besar dan menunjukkan scrollbar di sisi kanan jika saya menggerakkan jari ke atas dan ke bawah.

Omong-omong ... ini tidak tergantung pada fokus input. Fokus input hanya memindahkan posisi gulir sehingga Anda dapat melihat hasilnya.

Hai guys, apa perkembangan saat ini di sini?
Saya membuat file ion khusus dan menghapus tambahan 'height=device-height' darinya.
Setelah perubahan ini semuanya berfungsi dengan baik. Tidak diperlukan perbaikan CSS lagi dan fokus pada ketukan bidang input berfungsi dengan benar.
Saya juga menggunakan plugin Keyboard di iOS dan melakukan hal berikut:

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

Menempatkan input dalam konten ion terpisah juga tidak menghentikan perilaku membuat seluruh tampilan termasuk bilah header dapat digulir di bawah tampilan web saat input mendapat fokus. Perilaku yang sama terjadi seperti pada screencast saya sebelumnya: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

@ D3CK3R kami sedang berusaha untuk meluruskan semua skenario viewport yang berbeda :)

@CoenWarmer maukah Anda menjalankan Plugin Keyboard Ionic? Kami baru saja mengumumkannya dan saya ingin tahu bagaimana cara kerjanya pada input di luar tampilan gulir.

Anda dapat menginstalnya dengan menjalankan cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git dari dalam proyek Cordova Anda.

@tlancina Itu berhasil! Setelah saya menambahkan plugin, konten tidak lagi dapat diseret di bawah viewport ketika input memiliki fokus. Luar biasa!!

Apakah plugin siap untuk produksi? Saya ingin menyebarkan ini sesegera mungkin karena proyek ini baru saja diterbitkan ke toko.

@CoenWarmer Anda tidak tahu betapa senangnya saya melihat komentar terakhir Anda! Kerja bagus @tlancina!

@adamdbradley @tlancina

Ya!!!

@CoenWarmer ya untuk iOS sudah siap produksi. Kami memiliki versi sebelumnya di aplikasi yang baru saja diterima di app store, dan menurut saya hal-hal gulir yang kami tambahkan bukanlah alasan untuk penolakan. Sangat senang itu bekerja untuk Anda!

Bagus untuk ditutup? @tlancina

Ini masih menjadi masalah dalam rilis beta14. Setelah beberapa debugging ekstensif, saya akhirnya menemukan perbaikannya.

Dalam kasus saya, itu terkait dengan meta viewport .

Nilai asli (menyebabkan tajuk ditampilkan di belakang bilah status)

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

Nilai baru (memperbaiki masalah ini)

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

Saya telah memulai proyek saya waaaay kembali sebelum beta1 jadi ini mungkin html warisan yang tidak pernah saya perhatikan.

Semoga ini bisa membantu seseorang.

@rvanbaalen Saya memiliki meta viewport yang tepat di file indeks saya, tetapi dalam kasus saya ketika saya memfokuskan elemen teks input, badan berada di atas bilah status sehingga bilah status disembunyikan. Bilah status tetap tersembunyi setelah itu bahkan setelah keyboard meluncur ke bawah.

Ini masih menjadi masalah bagi saya. Saya memiliki plugin keyboard yang ditambahkan. Saya mencoba menggunakan textarea sederhana sebagai "notepad" sehingga akan memenuhi seluruh layar seperti yang Anda lihat dengan tinggi saya: gaya 100%. Agar gaya itu berfungsi, saya harus menonaktifkan gulir dengan scroll="false" karena gaya ketinggian hanya akan meluas ke ketinggian induknya. Mungkin ada cara yang lebih baik untuk membuat "notepad" ini untuk menghindari masalah ini dan saya akan menghargai saran apa pun.

Saya telah menambahkan warna latar belakang ke area teks untuk membuat tangkapan layar di bawah lebih jelas.

Saya menggunakan tampilan ini:

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

Tampilan awal

Setelah mengklik area teks

Menunjukkan bahwa saya dapat menggulir saat area teks memiliki fokus.

Masih ada masalah guys, tolong bantu @ajoslin @adamdbradley

Simulator iOS - iPhone 6 / iOS 8.3
versi ionik 1.0.0-rc.0
plugin diinstal:

• 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 dari 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
Kamu harus mencobanya

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.

dari keyboard ios note

itu akan bekerja seperti pesona.

dapatkah saya mengatur cordova.plugins.Keyboard.disableScroll(true) dan masih mengharapkan tampilan untuk menggulir ke input saya?
Jika saya menonaktifkan gulir, bilah status tidak didorong lagi, tetapi keyboard tumpang tindih dengan bidang input saya.

@michaelknoch selama input Anda berada dalam tampilan gulir (seperti ion-content) itu akan secara otomatis menggulir ke tampilan, kecuali jika Anda telah memanggil ionic.keyboard.disable() .

@michaelknoch saya pikir Anda meminta keyboard-attach

@LightZam tetapi hanya mendukung bilah ion-footer dan input saya ada di dalam konten saya di ion-view

@tlancina haruskah saya membungkus konten saya dengan ionScroll? http://ionicframework.com/docs/api/directive/ionScroll/

@michaelknoch Anda tidak perlu melakukannya, karena ion-content sudah memiliki tampilan gulir. Jika Anda dapat membuat codepen sederhana yang mereproduksi masalah, bersama dengan ponsel dan OS apa yang Anda gunakan, serta output dari perintah ionic info (jika Anda menggunakan CLI) saya akan mengambil lihat.

@tlancina Saya menghadapi masalah ini pada
Cordova CLI: 5.2.0
Versi Ionik: 1.1.0
Versi CLI Ionik: 1.6.4
Versi Lib Aplikasi Ionic: 0.3.8
versi penyebaran ios: 1.7.0
versi ios-sim: 4.1.1
OS: Mac OS X Yosemite
Versi Node: v0.12.7
Versi Xcode: Xcode 7.0 Build versi 7A176x
telepon - iphone 4S, ios 7.0.6

jika saya menyimpan header "cordova.plugins.Keyboard.disableScroll(true)" jangan keluar, tetapi keyboard berada di atas textarea saya. dan saya menyimpan textarea (menggunakan dengan msd-elastis) di dalam, untuk mendapatkan gaya yang mirip seperti whatsapp, jadi itu di luar ion-content

dan jika saya menggunakan keyboard-attach maka itu kacau dengan msd-elastis :(
ada saran?

mencoba dengan ionic.Platform.fullScreen()
tapi tidak berhasil ... juga fullScreen () ini membuat masalah lain di ios ...
itu mengurangi tinggi tajuk ... karena css ini tidak diterapkan saat Anda memanggil layar penuh ()
.platform-ios.platform- cordova:not (.fullscreen) .bar- header:not (.bar-subheader) {height: 64px; }

semuanya baik-baik saja di andorid.

Saya mengalami masalah yang hampir sama setelah memutakhirkan Cordova ke 6.0.0, yaitu, bilah status muncul dan tumpang tindih dengan bilah Header ketika bidang formulir difokuskan. Masalah ini ada di perangkat android saya. Saya belum mencoba perangkat iOS. Adakah yang bisa membantu?

Cordova CLI: 6.0.0
Versi tegukan: CLI versi 3.8.11
Gulp lokal: Versi lokal 3.8.11
Versi Ionik: 1.0.0-rc.5
Versi CLI Ionik: 1.7.14
Versi Lib Aplikasi Ionic: 0.7.0
versi penyebaran ios: 1.8.3
versi ios-sim: 5.0.4
OS: Mac OS X El Capitan
Versi Node: v0.12.2
Versi Xcode: Xcode 7.2 Membangun versi 7C68

Saya mengalami masalah ini di Android setelah memutakhirkan ke Cordova 6.0.0 dan menyelesaikannya dengan memanggil metode AndroidFullScreen.immersiveMode dari plugin https://github.com/mesmotronic/cordova-plugin-fullscreen

// Sembunyikan UI sistem dan sembunyikan (khusus Android 4.4+)
AndroidFullScreen.immersiveMode(fungsi sukses, fungsi error);

Masalah ini masih terjadi, menyelesaikannya dengan membuka layar penuh bukanlah solusi yang tepat karena aplikasi seharusnya tidak benar-benar berjalan di layar penuh, tetapi hanya untuk pengujian saya mencobanya, dan saat aplikasi masuk ke mode layar penuh, itu masih "lebih besar" dari layar, oleh karena itu Anda dapat menggulirnya sedikit dengan tajuk berada di bawah bilah status ...
Tolong bantu!

Memiliki masalah ini? Apakah ada pekerjaan di sekitar?

Juga memiliki masalah yang sama dengan iOS di Ionic 2

Lingkungan
Cordova CLI: 6.0.0
Versi Ionik: 2.0.0-beta.3
Versi CLI Ionik: 2.0.0-beta.19
Versi Lib Aplikasi Ionic: 2.0.0-beta.9
versi ios-deploy: Tidak diinstal
versi ios-sim: 5.0.6
OS: Mac OS X El Capitan
Versi Node: v5.7.1
Versi Xcode: Xcode 7.2.1 Versi build 7C1002

Seperti yang Anda lihat, tidak ada ruang/padding antara bilah status dan header di aplikasi Ionic.

Masalah baru/lama dengan keyboard ada di sini lagi. Meskipun saya dapat menonaktifkan pengguliran saat input difokuskan dengan mengetuk, masalah lama dengan tajuk yang menggulir keluar dari pandangan muncul lagi jika memfokuskan bidang formulir dengan tombol khusus keyboard virtual. Pada keyboard Android ada tombol hijau di kanan bawah yang memungkinkan untuk beralih ke input berikutnya dalam formulir. Bahkan jika saya mematikan pengguliran, tombol menggulir tampilan untuk membuat input terfokus terlihat dan sebagai hasilnya tajuk keluar dari layar.

Untuk menguji ini, input pertama harus dalam tampilan dan fokus dengan keyboard yang terlihat dan input kedua harus di flip bawah (di suatu tempat di bawah keyboard). Sekarang mengetuk tombol hijau (seperti pada gambar) menghasilkan pengguliran tampilan dan tajuk padam layar.

Kordoba 6.3.0
ionic-plugin-keyboard 2.2.1
Diuji pada perangkat dengan Android 5
Bangun untuk Android 24.0.1

Apakah Anda punya ide untuk mematikan tombol ini atau memperbaiki masalah? Saya tidak 100% yakin, tetapi saya menduga ini dimulai setelah cordova memutakhirkan ke beberapa versi 6+.

@rafaellop Apakah Anda menyelesaikan masalah ini?

memiliki masalah ini muncul ketika unggahan file dari layar Telepon/Kamera terbuka di iOS.

Saya mengalami masalah ini dengan pembuat email

Sunting Bagi mereka yang masih mengalami masalah ini bahkan setelah mencoba semuanya, coba kembali ke [email protected]. Sepertinya 4.3 mungkin telah memperkenalkan beberapa perilaku aneh. Bahkan nightlies cordova-ios terbaru tampaknya tidak memperbaiki masalah saya tetapi mengembalikannya memperbaikinya.

Masalah ini masih terjadi pada saya juga, ini tidak terselesaikan.

Di IOS, jika kita mengetuk bilah status, seluruh konten ion akan berkedip di IONIC2. Bagaimana cara mengatasi masalah ini. Mohon sarannya..
Terima kasih.

Kembali ke [email protected] tidak membantu saya,

Baru sadar dari pos lain saya dapat menurunkan versi plug cordova-statusbar dari 2.2.1 ke 2.2.0 dan itu memperbaiki masalah. Sepertinya itu adalah plugin statusbar yang menyebabkan masalah dalam kasus saya.

Saya memiliki masalah ini dengan

• ionik 3.9.2
• cordova-ios 4.4.0
• iOS 10.3
• Bermacam-macam perangkat iPhone dan emulator

Saya memiliki textarea dengan height: 100%; (yang semuanya berisi ion-content) dan ion-header akan memperkecil tampilan setiap kali textarea difokuskan. Perbaikan saya adalah mengubahnya menjadi height: auto; min-height: 25%; dan meletakkan textarea di dalam div dengan height: 100%; margin: 0; padding: 0; dan (click)=focusTextArea() . Agak janky dan saya ingin solusi yang lebih baik tetapi ini berfungsi baik untuk saat ini: +1:

Silakan gunakan plugin ini ionic cordova plugin add cordova-plugin-ionic-webview --save. Ini memecahkan masalah saya terima kasih

Saya mengalami masalah yang sama dalam kombinasi dengan plugin pembuat email.

Saya memecahkan masalah dengan memutakhirkan cordova-plugin-statusbar dari versi 2.2.1 ke 2.3.0.

@jvhe123 Saya baru saja mencoba melakukan itu tetapi sepertinya v2.3.0 tidak ada, maksud Anda v2.2.3?

@glenr4

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

Saya mengalami masalah ini untuk iPhone X. Membuka keyboard mendorong tajuk ke atas dan hampir keluar dari halaman.

Saya memperbaikinya dengan meletakkan eventListener di file javaScript saya untuk halaman yang terpengaruh:

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

Ini berhasil untuk saya, semoga bisa bekerja untuk salah satu dari Anda juga.

Terima kasih untuk masalah ini! Masalah ini sedang dikunci untuk mencegah komentar yang tidak relevan dengan masalah asli. Jika ini masih menjadi masalah dengan versi terbaru Ionic, harap buat masalah baru dan pastikan template terisi penuh.