Ionic-framework: يتحرك شريط الرأس لأعلى خلف شريط الحالة أو حتى خارج إطار العرض تمامًا عند التركيز على حقل النموذج

نسخة مكررة من # 818

شكرا. نحن نعمل على إصلاح أخطاء لوحة المفاتيح هذه لـ beta2.

هل لديك أي دليل على سبب هذا؟
بحلول الوقت الذي تخطط فيه لإصدار beta2 ، يكون تطبيقي قد خرج بالفعل ؛-)

فيما يلي عرض عملي لهذه المشكلة:

لقد اختبرت هذا للتو من خلال عملية "البدء" باستخدام "Ionic، v1.0.0-beta.1".

خطواتي:

• npm تثبيت -g كوردوفا الأيونية
• حالة البداية الأيونية
• منصة أيونية تضيف دائرة الرقابة الداخلية

بعد ذلك قمت بتحرير app.js لتبدأ بنموذج بسيط. :

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

ثم:

• بناء أيوني ios
• أيوني مضاهاة ios

ها هي النتيجة:

كما ترى ، تدفع لوحة المفاتيح النموذج لأعلى في شريط الحالة.

مرحبًا جاستن ، أعتقد أن المشكلة تكمن في ذلك

أعط هذه اللقطة وأخبرني إذا كان ذلك مفيدًا.

يوم الأربعاء ، 2 أبريل ، 2014 الساعة 4:34 مساءً ، جوستين نويل [email protected]

فيما يلي عرض عملي لهذه المشكلة:

لقد اختبرت هذا للتو عبر عملية "البدء" باستخدام "Ionic ،
الإصدار 1.0.0-beta.1 ".

خطواتي:

• npm تثبيت -g كوردوفا الأيونية
• حالة البداية الأيونية
• منصة أيونية تضيف دائرة الرقابة الداخلية

ثم قمت بعد ذلك بتحرير app.js للبدء بنموذج بسيط. :

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

ثم:

• بناء أيوني ios
• أيوني مضاهاة ios

ها هي النتيجة:

[صورة: مشكلة شريط الحالة] https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

كما ترى ، تدفع لوحة المفاتيح النموذج لأعلى في شريط الحالة.

قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/driftyco/ionic/issues/932#issuecomment -39386769
.

لسوء الحظ ، هذا لم يساعد. في نموذج المشروع ، أضفت هذا إلى "style.css":

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

لم ينجح ذلك بالرغم من تضمين "style.css" بعد ملف Ionic CSS. لقد أكدت أيضًا في تصحيح Safari أن position: static قد تم تطبيقه على الجسم.

لذلك ، حاولت بعد ذلك الجسد فقط دون حظ.

body {
    position: static;
}

بعد ذلك ، قمت للتو بتحديث ملف "ionic.css". هذا لا يزال لا يعمل.

اعتقدت أيضًا أنك ربما قصدت جعل الرأس ثابتًا ؛ لذلك جربتها. لا حظ في ذلك ايضا

آه لم أر أنه iOS 7.1 فقط. لا يمكنني الوصول إلى جهاز Mac في الوقت الحالي ، لذا سألقي نظرة على أول شيء غدًا. شكرا لمساعدتك في النظر في هذا.

شكرا على العرض التوضيحي Justin: +1:

اعتمادًا على الإعداد الخاص بك ، لن يؤدي تعيين .body إلى position:static إصلاح أي شيء ، لأن .pane و .view لهما أيضًا الموضع المطلق.

في تطبيقات الويب المخصصة للهاتف المحمول التي قمت بإنشائها ، يجب أن يكون الرأس خارج أي من عناصر الموضع الشديد هذه وأن يكون الرأس نفسه مضبوطًا على position:fixed للبقاء هناك عندما تكون لوحة المفاتيح قيد التشغيل. يحتوي Android على خيار يسمى adjust-resize والذي يسحق العرض ليلائم لوحة المفاتيح. من ناحية أخرى ، يقوم نظام iOS من ناحية أخرى بتحريك العرض لتوسيط الإدخال على الشاشة.

لدى كوردوفا أيضًا تفضيل يسمى "KeyboardShrinksView" والذي يتم تعيينه افتراضيًا على false. لم ألق نظرة على هذا حتى الآن ، لكن يبدو أنه حل لنظام iOS لما يفعله Android بالفعل مع ضبط تغيير الحجم

خلق انسجام بين هذين الفروقين هو واحد من جحيم الوظيفة

نحن نعمل بنشاط على إصلاحات لوحة المفاتيح الآن لإيقاف كل هذه المشاكل.

للأسف لم يتم إصلاح هذا الخطأ في ليلة 1717.

أحد الأشياء التي لاحظتها tlancina هو أنه مع إصلاحات النقر الأخيرة ، إذا نقرت على الإدخال مباشرةً ، فلن تحرك الرأس لأعلى. لذلك أعتقد أننا حللنا جزءًا من هذه المشكلة. ومع ذلك ، إذا قمت بالنقر فوق الملصق الذي يلف أحد المدخلات ، فسيؤدي ذلك بعد 300 مللي ثانية إلى القيام بالتمرير الأصلي القبيح. الطريقة التي يعمل بها Ionic css الافتراضية من الصعب معرفة الفرق بين ملصق الالتفاف والإدخال الفعلي ، لذلك قد يكون هذا جزءًا من سبب عدم نجاحه دائمًا. لقد كنت أستخدم صفحة الاختبار هذه للمساعدة في تصحيح هذه المشكلات على كل جهاز.

في الوقت الحالي ، أعتقد أن السبب هو أننا لا نمنع الخيار الافتراضي عند النقر على الملصق. إذا قمنا بعمل e.preventDefault () على ملصق يلتف أحد المدخلات ، فلن تنبثق لوحة المفاتيح تلقائيًا عند النقر الأول. سأبحث في هذا أكثر ، شكرًا.

تطوع adamdbradley كمختبِر آخر لهذا الإصلاح عندما يدخل في الليل. شكرا.

للأسف لم يتم حل هذه المشكلة بعد في الإصدار 1.0.0 beta2.

CoenWarmer نحن على علم بالمشكلات وما زلنا نعمل على

تمت مصادفته في:

• iOS7.1.1
• أيوني 1.0.0 بيتا 2
• في قرطبة
• في جهاز محاكاة وجهاز
• ليس بملء الشاشة
• لا توجد تسمية مستخدمة ، فقط الإدخال
• يمكن تمرير العرض بعد التركيز على حقل الإدخال ، إذا لم يكن هناك تركيز على حقل الإدخال ، فلا يمكن تمرير العرض
• لا يتم تمرير العرض فورًا بعد التركيز عليه وانبثاق لوحة المفاتيح. عندما يتم التركيز على حقل الإدخال ، يمكنك بعد ذلك وضع إصبعك على حقل الإدخال والسحب لأعلى لتحريك العرض خارج عرض الويب.

يحدث أيضًا على Android 4.4 و 4.3 ، باستخدام الإصدار 1.0.0 beta2 أيضًا. بالضبط نفس الظروف مثل iOS7.1. لذلك عندما يتم التركيز على حقل الإدخال وظهور لوحة المفاتيح ، لا يوجد شيء خاطئ ، عندما يتم التركيز على الإدخال ثم تضع إصبعك على حقل الإدخال وتبدأ في سحبه لأعلى أو لأسفل عند ذلك يمكنك نقل كل المحتوى خارج العرض . سأقوم بعمل تسجيل للشاشة لاحقا.

سكرينكاست: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

بعد beta2 لدي هذه المشكلة على الشاشات الصغيرة (مثل iphone3 أو iphone4).

iphone 5 (موافق)

iphone 4 (مشاكل)

zelphir هل يمكنك رجاءً توفير رمز برمجي يكرر هذه المشكلة؟ هل كلاهما iOS 7.0 أم 7.1؟

CoenWarmer هي منطقة المحتوى بالصدفة؟ الطريقة الوحيدة التي يمكنني بها تكرار مشكلتك هي من خلال وجود إدخال ليس في عرض التمرير.

فقط للتوضيح - هذا هو السلوك المتوقع إذا كنت لا تستخدم عرض التمرير. إذا كانت هناك مدخلات أسفل لوحة المفاتيح ، ولم تتمكن من التمرير إليها باستخدام JS ، فسيتم إجبار المتصفح على تحويل المحتوى لأعلى حتى تكون مرئية ، وهذا هو السبب في أنك قادر على تحريك كل شيء لأعلى.

tlancina الإدخال الخاص بي ليس ضمن منطقة المحتوى.

هذا هو الكود الذي أستخدمه:

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

لست متأكدًا من أنني أتابع تمامًا ما تقوله بشأن كون هذا السلوك المتوقع. في الوقت الحالي ، يبدو أن التطبيق يتعطل عندما يتم تمرير كل شيء أسفل العنوان. هل يجب علي بدلاً من ذلك وضع حقل الإدخال داخل محتوى أيوني؟

حسنًا ، افترض أن لديك قائمة بالعديد من المدخلات ، تصل إلى أسفل الصفحة. إذا لم يكونوا داخل منطقة يمكن التمرير إليها لاستخدام Javascript ، فكيف يمكن إظهارها عند ظهور لوحة المفاتيح؟ الطريقة الوحيدة هي استخدام التمرير الأصلي في المتصفح ، والذي يعمل عن طريق تحويل المحتوى - كل ذلك ، بما في ذلك الرأس.

عندما يكون الإدخال أو المنطقة القابلة للتركيز ضمن عرض التمرير الأيوني ، فإننا نمنع التمرير الافتراضي ونستخدم جافا سكريبت لعرضه ، مع ترك الرأس في مكانه.

لسوء الحظ ، لست خبيرًا في جهاز توجيه واجهة المستخدم ، ولكن حاول وضع المحتوى الأيوني حول كل المحتوى الموجود على الصفحة ومعرفة ما إذا كان ذلك مفيدًا.

أفهم الآن - لكن ألا يؤدي ذلك إلى اختفاء التأثير المرئي غير المرغوب فيه لشريط التنقل بالكامل بما في ذلك زر الرجوع؟

أكثر من ذلك في حالة الاستخدام الخاصة بي ، إذا وضعت حقل الإدخال داخل محتوى أيوني ، كيف يمكنني التأكد من بقائها ثابتة في الجزء العلوي أسفل شريط الرأس بطريقة تعمل الرسوم المتحركة الانتقالية بشكل صحيح على iOS و Android؟

نعم ، يبدو أن وضع علامات تبويب الخادعة والحفاظ على منطقة قابلة للتمرير لإدخال ما أمر صعب للغاية ، وهو أمر لا بد أن يحدث في كثير من الأحيان. adamdbradley وأنا أبحث فيه الآن.

لست متأكدًا من فهمي لمشكلة الانتقالات ، إذا فعلت شيئًا مثل

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

هل يفسد الرسوم المتحركة؟ من المحتمل تمامًا أن يؤدي وجود مناطق محتوى متعددة إلى إفساد أشياء أخرى ، حيث من المحتمل أن يكون هناك واحد فقط.

tlancina آه رائع ، لم أفكر في استخدام عنصري محتوى أيوني في جزء واحد. سنرى كيف يعمل ذلك وتقديم تقرير مرة أخرى.

تحدث مشكلة الرسوم المتحركة التي كنت أشير إليها في بعض إصدارات Android. إذا كنت تستخدم position: static على عنصر ما وانتقلت بعيدًا عن هذا العرض ، على Android 4.1 إلى 4.3 (أعتقد ، لست متأكدًا بنسبة 100٪ ، سوف تتحقق) ستظل هذه العناصر مقفلة بمجرد بدء الرسم المتحرك. لذلك ستبدأ جميع العناصر (محتوى أيوني ، علامات التبويب ، أشرطة الرأس ، إلخ) في التحرك إلى اليسار ، لكن العنصر الذي أعطيته الموضع: ثابت سيبقى في نفس المكان حتى تكتمل الرسوم المتحركة. هذا لا يحدث على iOS. هذا هو السبب في أنني كنت مترددًا في استخدام الوضع الثابت في أي مكان.

tlancina فقط حاول وضع عنصر الإدخال في محتوى أيوني واحد ، ووجود باقي المحتوى في محتوى أيوني آخر. لسوء الحظ ، فإن أي إدخال تم إدخاله في عنصر الإدخال لن يقوم الآن بتصفية ng-تكرار الموجود في محتوى أيون آخر. اقتراحات أخرى؟

CoenWarmer لأن المحتوى الأيوني ينشئ نطاقًا

حاول وضع وحدة تحكم على كلا المحتوىين. إذا كانت وحدة التحكم كذلك ، فلا تستخدم فقط عنصرًا بدائيًا للإدخال.

أنت تعاني من مشكلة `` النقطة '' الخاصة بميراث النطاق - يتم تعيين إحدى البدائل في نطاق فرعي مختلف على النطاق الفرعي ، وليس النطاق الأصلي. هل تعرف ما أعنيه؟ إذا لم تفعل ، lemme أعلم وسأعثر على رابط / اشرح ذلك.

لست على دراية به ، للأسف لا. الحرص على مشاركة؟ :)

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

آه ، نعم ، هذا منطقي! سأعطي الأمر مرة أخرى: +1:

ياadam. ماذا عن تذييل مع المدخلات؟ نظرًا لأن هذا خارج منطقة التمرير ، فسيؤدي ذلك إلى حدوث المشكلة أيضًا. بأي حال من الأحوال حول ذلك؟

لدي أيضًا هذه المشكلة على iPad (7.1). رأيت أن الأيونات تضيف ارتفاعًا = ارتفاع الجهاز إلى منفذ العرض بعد التغييرات الأخيرة إذا لم يتم ضبطها.
بسبب هذه الخاصية ، يصل حجم منفذ العرض إلى حوالي 200 بكسل (ارتفاع) إلى حجم كبير ويمكن تمريره بالكامل.
عندما أزيله يعمل.
يمكنني إصلاح هذا إذا قمت بطريقة ما بتعيين. view و. pane على الموضع: ثابت والجسم إلى الموضع: ثابت ، لكن منفذ العرض الرئيسي لا يزال كبيرًا ويظهر شريط التمرير على الجانب الأيمن إذا قمت بتحريك الإصبع لأعلى ولأسفل.

بالمناسبة ... هذا مستقل عن تركيز الإدخال. يقوم تركيز الإدخال فقط بتحريك موضع التمرير حتى تتمكن من رؤية النتيجة.

مرحبًا يا رفاق ، ما هو التقدم الحالي هنا؟
لقد أنشأت ملفًا أيونيًا مخصصًا وأزلت الإضافة "height = device-height" منه.
بعد هذا التغيير كل شيء يعمل بشكل جيد. لم تعد هناك حاجة لإصلاحات CSS بعد الآن والتركيز على النقر على حقل الإدخال يعمل بشكل صحيح.
أنا أستخدم أيضًا المكوِّن الإضافي للوحة المفاتيح على نظام iOS وأقوم بما يلي:

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

لا يؤدي وضع الإدخال في محتوى أيوني منفصل أيضًا إلى إيقاف سلوك جعل العرض بالكامل بما في ذلك شريط الرأس قابلاً للتمرير أسفل عرض الويب عندما يتم التركيز على الإدخال. يحدث نفس السلوك كما في تسجيل الشاشة السابق: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

@ D3CK3R نعمل على تعديل جميع سيناريوهات منفذ العرض المختلفة :)

CoenWarmer هل تمانع في تشغيل المكون الإضافي Ionic Keyboard؟ لقد جعلناها عامة ولدي فضول لمعرفة كيف ستعمل على المدخلات خارج عرض التمرير.

يمكنك تثبيته عن طريق تشغيل cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git من داخل مشروع كوردوفا الخاص بك.

tlancina هذا يعمل! بعد أن أضفت المكون الإضافي ، لم يعد المحتوى قابلاً للسحب أسفل منفذ العرض عندما يكون التركيز على الإدخال. مذهل!!

هل البرنامج المساعد جاهز للإنتاج؟ أرغب في نشر هذا في أقرب وقت ممكن حيث تم نشر هذا المشروع للتو في المتجر.

CoenWarmer ليس لديك أدنى فكرة عن مدى سعادتي برؤية تعليقك الأخير! عمل عظيمtlancina!

تضمين التغريدة

نعم!!!

CoenWarmer نعم لنظام iOS إنه جاهز للإنتاج. لدينا إصدار سابق منه في تطبيق تم قبوله للتو في متجر التطبيقات ، ولا أعتقد أن عناصر التمرير التي أضفناها هي أي سبب للرفض. سعيد حقًا أنه يعمل من أجلك!

جيد للإغلاق؟ تضمين التغريدة

كانت هذه مشكلة في إصدار beta14. بعد بعض التصحيح المكثف وجدت الحل أخيرًا.

في حالتي ، كان مرتبطًا بـ meta viewport .

القيمة الأصلية (تسبب في ظهور الرأس خلف شريط الحالة)

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

قيمة جديدة (حل هذه المشكلة)

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

لقد بدأت مشروعي مرة أخرى قبل beta1 لذلك ربما كان هذا بعض لغة html القديمة التي لم ألاحظها أبدًا.

أمل أن هذا يساعد شخصاما.

rvanbaalen لدي منفذ عرض ميتا دقيق في ملف الفهرس الخاص بي ولكن في حالتي عندما أركز عنصر نص الإدخال ، يكون النص أعلى شريط الحالة مما يؤدي إلى إخفاء شريط الحالة. يظل شريط الحالة مخفيًا بعد ذلك حتى بعد انزلاق لوحة المفاتيح لأسفل.

هذه لا تزال مشكلة بالنسبة لي. لدي إضافة لوحة المفاتيح. أحاول استخدام منطقة نصية بسيطة كـ "مفكرة" بحيث تملأ الشاشة بأكملها كما ترون مع طولي: 100٪ من الأنماط. من أجل جعل هذه الأنماط تعمل ، اضطررت إلى تعطيل التمرير بالتمرير = "خطأ" لأن نمط الارتفاع سيتوسع فقط إلى ارتفاع الأصل. ربما تكون هناك طريقة أفضل لعمل "المفكرة" هذه لتجنب هذه المشكلة وأنا أقدر أي اقتراحات.

لقد أضفت لونًا للخلفية إلى منطقة النص لجعل لقطات الشاشة أدناه أكثر وضوحًا.

أنا أستخدم هذا العرض:

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

العرض الأولي

بعد النقر فوق منطقة النص

إظهار أنه يمكنني التمرير أثناء التركيز على منطقة النص.

لا تزال قضية الرجال، يرجى مساعدةajoslinadamdbradley

iOS Simulator - iPhone 6 / iOS 8.3
الإصدار الأيوني 1.0.0-rc.0
الإضافات المثبتة:

• 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 من مشروط:

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

MustafaHosny اللهم امين
يجب أن تحاول

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.

من ملاحظة لوحة المفاتيح ios

سيعمل مثل السحر.

هل يمكنني ضبط cordova.plugins.Keyboard.disableScroll (صحيح) وما زلت أتوقع أن ينتقل العرض إلى مدخلاتي؟
إذا قمت بتعطيل التمرير ، فلن يتم دفع شريط الحالة للخارج بعد الآن ، ولكن لوحة المفاتيح تتداخل مع حقل الإدخال الخاص بي.

michaelknoch طالما أن الإدخال الخاص بك ضمن عرض التمرير (مثل محتوى أيون) ، يجب أن يتم تمريره تلقائيًا إلى العرض ، إلا إذا كنت قد استدعت ionic.keyboard.disable() .

michaelknoch أعتقد أنك تطلب إرفاق لوحة المفاتيح

LightZam ولكنه يدعم فقط شريط أيون تذييل

tlancina هل يجب أن http://ionicframework.com/docs/api/directive/ionScroll/

michaelknoch لن تحتاج إلى ذلك ، لأن ion-content به عرض تمرير بالفعل. إذا كان بإمكانك إنشاء رمز برمجي بسيط يعيد إنتاج المشكلة ، جنبًا إلى جنب مع الهاتف ونظام التشغيل اللذين تستخدمهما ، بالإضافة إلى الإخراج من الأمر ionic info (إذا كنت تستخدم CLI) فسأخذ نظرة.

tlancina أواجه هذه المشكلة في
كوردوفا CLI: 5.2.0
الإصدار الأيوني: 1.1.0
إصدار أيوني CLI: 1.6.4
إصدار ليب التطبيق الأيوني: 0.3.8
إصدار iOS: 1.7.0
إصدار ios-sim: 4.1.1
نظام التشغيل: Mac OS X Yosemite
إصدار العقدة: v0.12.7
إصدار Xcode: Xcode 7.0 Build version 7A176x
الهاتف - iphone 4S، ios 7.0.6

إذا احتفظت برأس "cordova.plugins.Keyboard.disableScroll (صحيح)" ، فلا يتم دفعه للخارج ، لكن لوحة المفاتيح تأتي أعلى منطقة النص الخاصة بي. وأبقيت منطقة النسيج (باستخدام مع مرونة msd) بالداخل، للحصول على نمط مشابه مثل whatsapp ، لذا فإن محتواه الأيوني الخارجي

وإذا كنت أستخدم لوحة المفاتيح المرفقة ، فسيتم ربطها بمطاط msd :(
أي اقتراحات ؟

حاولت مع ionic.Platform.fullScreen ()
لكن لا حظ ... أيضًا هذه الشاشة الكاملة () تخلق مشكلة أخرى في iOS ...
إنه يقلل من ارتفاع الرأس ... حيث لا يتم تطبيق css هذا عند استدعاء ملء الشاشة ()
.platform-ios.platform- cordova: not (.fullscreen) .bar- header: not (.bar-subheader) {height: 64px؛ }

كل شيء على ما يرام في أندوريد.

أواجه نفس المشكلة تقريبًا بعد ترقية كوردوفا إلى 6.0.0 ، أي يظهر شريط الحالة ويتداخل مع شريط العنوان عند التركيز على حقل النموذج. توجد هذه المشاكل على جهاز android الخاص بي. لم أجرب جهاز iOS حتى الآن. يمكن لأي شخص الثابتة والمتنقلة المساعدة؟

كوردوفا CLI: 6.0.0
إصدار Gulp: CLI الإصدار 3.8.11
محلي Gulp: الإصدار المحلي 3.8.11
الإصدار الأيوني: 1.0.0-rc.5
إصدار CLI الأيوني: 1.7.14.0
إصدار ليب التطبيق الأيوني: 0.7.0
إصدار iOS: 1.8.3
إصدار ios-sim: 5.0.4
نظام التشغيل: Mac OS X El Capitan
إصدار العقدة: v0.12.2
إصدار Xcode: Xcode 7.2 Build version 7C68

كنت أواجه هذه المشكلة على Android بعد الترقية إلى Cordova 6.0.0 وقمت بحلها عن طريق استدعاء طريقة AndroidFullScreen.immersiveMode للمكون الإضافي https://github.com/mesmotronic/cordova-plugin-fullscreen

// إخفاء واجهة مستخدم النظام وإبقائها مخفية (Android 4.4+ فقط)
AndroidFullScreen.immersiveMode (SuccessFunction، errorFunction) ؛

لا تزال هذه المشكلة تحدث ، ولا يعد حلها من خلال الانتقال بملء الشاشة حلاً مناسبًا نظرًا لأن التطبيق لا يجب أن يعمل بالفعل في وضع ملء الشاشة ، ولكن فقط للاختبار الذي جربته ، وبينما ينتقل التطبيق إلى وضع ملء الشاشة ، فهو كذلك لا تزال "أكبر" من الشاشة ، لذلك يمكنك تمريرها قليلاً مع انتقال الرأس أسفل شريط الحالة ...
الرجاء المساعدة!

هل تواجه هذه المشكلة؟ ايوجد اي عمل في هذه المنطقه؟

يوجد أيضًا نفس المشكلة مع iOS في Ionic 2

بيئة
كوردوفا CLI: 6.0.0
الإصدار الأيوني: 2.0.0-beta.3
إصدار CLI الأيوني: 2.0.0-beta.19
إصدار ليب التطبيق الأيوني: 2.0.0-beta.9
إصدار ios-publish: غير مثبت
إصدار ios-sim: 5.0.6
نظام التشغيل: Mac OS X El Capitan
إصدار العقدة: v5.7.1
إصدار Xcode: Xcode 7.2.1 Build version 7C1002

كما ترى ، لا توجد أي مساحة / حشوة بين شريط الحالة والرأس في تطبيق Ionic.

مشكلة جديدة / قديمة مع لوحة المفاتيح هنا مرة أخرى. بينما يمكنني تعطيل التمرير عند تركيز الإدخال عن طريق النقر ، فإن المشكلة القديمة المتعلقة بتمرير الرأس خارج العرض تظهر مرة أخرى في حالة التركيز على حقول النموذج باستخدام الزر الخاص بلوحة المفاتيح الافتراضية. على لوحة مفاتيح Android ، يوجد زر أخضر في أسفل اليمين يسمح بالتبديل إلى الإدخال التالي في النموذج. حتى إذا قمت بإيقاف تشغيل التمرير ، يقوم الزر بتمرير العرض لجعل المدخلات المركزة مرئية ونتيجة لذلك يكون الرأس خارج الشاشة.

لاختبار ذلك ، يجب أن يكون الإدخال الأول في العرض ومركّزًا مع رؤية لوحة المفاتيح ويجب أن يكون الإدخال الثاني أسفل الجزء المرئي من الصفحة (في مكان ما أسفل لوحة المفاتيح). الآن يؤدي النقر على الزر الأخضر (كما في الصورة) إلى التمرير في العرض ويخرج الرأس عن الشاشة.

كوردوفا 6.3.0
لوحة المفاتيح الأيونية 2.2.1
تم اختباره على الجهاز بنظام Android 5
بناء لنظام Android 24.0.1

هل لديك أي أفكار لإيقاف تشغيل هذا الزر أو إصلاح المشكلة؟ لست متأكدًا بنسبة 100٪ ، لكنني أظن أن هذا بدأ بعد ترقية كوردوفا إلى إصدار 6+.

rafaellop هل قمت بحل هذه المشكلة؟

ظهور هذه المشكلة عند فتح ملف تحميل من شاشة الهاتف / الكاميرا على iOS.

أواجه هذه المشكلة مع مؤلف البريد الإلكتروني

تحرير بالنسبة لأولئك الذين لا يزالون يواجهون هذه المشكلة حتى بعد تجربة كل شيء ، حاول الرجوع مرة أخرى إلى [email protected]. يبدو كما لو أن 4.3 قد يكون قد أدخل بعض السلوك الغريب. حتى أحدث حفلات النوم الليلية في cordova-ios لا يبدو أنها تحل مشكلتي ولكن تم إصلاحها مرة أخرى.

لا تزال هذه المشكلة تحدث لي أيضًا ، ولم يتم حلها.

في IOS ، إذا نقرنا على شريط الحالة ، فسيومض محتوى أيون بالكامل في IONIC2. كيفية حل هذه المشكلة ، يرجى اقتراح ..
اشكرك.

لم تساعدني العودة إلى

أدركت للتو من منشور آخر أنني تمكنت من خفض مستوى المكون الإضافي cordova-statusbar من 2.2.1 إلى 2.2.0 وقام بإصلاح المشكلة. يبدو أنه كان المكوِّن الإضافي لشريط الحالة هو الذي تسبب في حدوث المشكلة في حالتي.

كان لدي هذه المشكلة مع

• أيوني 3.9.2
• كوردوفا اي او اس 4.4.0
• iOS 10.3
• مجموعة متنوعة من أجهزة iPhone والمحاكيات

كان لدي منطقة نصية تحتوي على height: 100%; (والذي كان يحتوي على محتوى أيوني بالكامل) وكان الرأس الأيوني يصغر عرضه كلما تم التركيز على منطقة النص. كان الإصلاح الذي أجريته هو تغييره إلى height: auto; min-height: 25%; ووضع منطقة النص داخل div مع height: 100%; margin: 0; padding: 0; و (click)=focusTextArea() . كندة جانكي وأنا نحب حلاً أفضل ولكن هذا يعمل جيدًا في الوقت الحالي: +1:

يرجى استخدام هذا البرنامج المساعد أيوني كوردوفا plugin add cordova-plugin-ionic-webview --save. شكرا لحل مشكلتي

لقد واجهت نفس المشكلة مع المكون الإضافي لملحن البريد الإلكتروني.

لقد قمت بحل المشكلة عن طريق ترقية شريط معلومات cordova-plugin-statusbar من الإصدار 2.2.1 إلى 2.3.0.

@ jvhe123 لقد حاولت للتو القيام بذلك ولكن يبدو أن v2.3.0 غير موجود ، هل تقصد v2.2.3؟

@ glenr4

• كوردوفا-المساعد-لوحة المفاتيح 1.2.0
• لوحة المفاتيح الأيونية 2.2.1

كنت أواجه هذه المشكلة لجهاز iPhone X. فتح لوحة المفاتيح دفع الرأس لأعلى وخارج الصفحة تقريبًا.

لقد أصلحته عن طريق وضع EventListener في ملف جافا سكريبت الخاص بي للصفحة المتأثرة:

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

لقد نجح هذا بالنسبة لي ، وآمل أن يعمل مع أحدكم أيضًا.

شكرا على المشكلة! تم قفل هذه المشكلة لمنع التعليقات غير ذات الصلة بالمشكلة الأصلية. إذا استمرت المشكلة في أحدث إصدار من Ionic ، فيرجى إنشاء مشكلة جديدة والتأكد من ملء النموذج بالكامل.