Ionic-framework: जब प्रपत्र फ़ील्ड फ़ोकस किया जाता है, तो हेडर बार स्टेटसबार के पीछे या व्यूपोर्ट से पूरी तरह से बाहर चला जाता है

#818 . का डुप्लीकेट

धन्यवाद। हम बीटा2 के लिए इन कीबोर्ड बग पर काम कर रहे हैं।

क्या आपके पास इसका कोई कारण है कि इसका क्या कारण हो सकता है?
जब तक आप बीटा 2 जारी करने की योजना बनाते हैं, तब तक मेरा ऐप पहले से ही बाहर है ;-)

यहाँ इस समस्या का एक कार्य प्रदर्शन है:

मैंने अभी "Ionic, v1.0.0-beta.1" का उपयोग करके "आरंभ करना" प्रक्रिया के माध्यम से इसका परीक्षण किया।

मेरे कदम:

• एनपीएम इंस्टाल-जी कॉर्डोवा आयनिक
• आयनिक प्रारंभ स्थितिबारटेस्ट साइडमेनू
• आयनिक मंच आईओएस जोड़ें

फिर मैंने एक साधारण रूप से शुरू करने के लिए 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>

फिर:

• आयनिक बिल्ड आईओएस
• आयनिक अनुकरण आईओएस

यहाँ परिणाम है:

जैसा कि आप देख सकते हैं, कीबोर्ड फॉर्म को स्टेटस बार में ऊपर धकेलता है।

हे जस्टिन, मेरा मानना ​​है कि मुद्दा यह है कि

इसे एक शॉट दें और मुझे बताएं कि क्या यह मदद करता है।

बुध, 2 अप्रैल, 2014 को शाम 4:34 बजे, जस्टिन नोएल ने नोटिफ़िकेशन @github.com लिखा:

यहाँ इस समस्या का एक कार्य प्रदर्शन है:

मैंने अभी "आयनिक" का उपयोग करके "आरंभ करना" प्रक्रिया के माध्यम से इसका परीक्षण किया है,
v1.0.0-बीटा.1"।

मेरे कदम:

• एनपीएम इंस्टाल-जी कॉर्डोवा आयनिक
• आयनिक प्रारंभ स्थितिबारटेस्ट साइडमेनू
• आयनिक मंच आईओएस जोड़ें

मैंने फिर एक साधारण रूप से शुरू करने के लिए 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>

फिर:

• आयनिक बिल्ड आईओएस
• आयनिक अनुकरण आईओएस

यहाँ परिणाम है:

[छवि: स्टेटस बार समस्या] https://cloud.githubusercontent.com/assets/57374/2597008/fb174690-baad-11e3-80aa-c88985210bcb.gif

जैसा कि आप देख सकते हैं, कीबोर्ड फॉर्म को स्टेटस बार में ऊपर धकेलता है।

इस ईमेल का सीधे उत्तर दें या इसे Gi tHub पर देखेंhttps://github.com/driftyco/ionic/issues/932#issuecomment -39386769
.

दुर्भाग्य से, इससे मदद नहीं मिली। नमूना प्रोजेक्ट में, मैंने इसे "style.css" में जोड़ा:

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

यह काम नहीं किया, भले ही "style.css" को आयोनिक सीएसएस फ़ाइल के बाद शामिल किया गया हो। मैंने सफारी डीबग में भी पुष्टि की है कि position: static को शरीर पर लागू किया गया था।

तो, मैंने तब बिना किसी किस्मत के सिर्फ शरीर की कोशिश की।

body {
    position: static;
}

इसके बाद, मैंने अभी "ionic.css" फ़ाइल को अपडेट किया है। यह अभी भी काम नहीं किया।

मैंने यह भी सोचा था कि आप हेडर को स्थिर बनाना चाहते थे; इसलिए मैंने एक कोशिश की। इसके साथ भी कोई भाग्य नहीं।

आह नहीं देखा कि यह केवल आईओएस 7.1 है। मेरे पास अभी मैक तक पहुंच नहीं है इसलिए मैं कल सबसे पहले देख लूंगा। इस पर गौर करने में आपकी मदद के लिए धन्यवाद।

काम कर रहे डेमो जस्टिन के लिए धन्यवाद: +1:

आपके सेटअप के आधार पर, .body को position:static करने से कुछ भी ठीक नहीं होगा, क्योंकि .pane और .view भी स्थिति पूर्ण होती है।

मेरे द्वारा बनाए गए कस्टम मोबाइल वेब ऐप्स में, हेडर को इनमें से किसी भी भारी स्थिति वाले तत्वों से बाहर होना चाहिए और कीबोर्ड के ऊपर रहने पर हेडर स्वयं position:fixed पर सेट होना चाहिए। एंड्रॉइड के पास adjust-resize नामक एक विकल्प है जो कीबोर्ड के ऊपर फिट होने के लिए दृश्य को निचोड़ता है। दूसरी ओर आईओएस, स्क्रीन पर इनपुट को केंद्रित करने के लिए दृश्य को पैन करता है।

कॉर्डोवा में "कीबोर्डश्रिंक्स व्यू" नामक एक प्राथमिकता भी होती है, जो डिफ़ॉल्ट रूप से झूठी होती है। मैंने इसे अभी तक नहीं देखा है, लेकिन यह आईओएस के लिए एक समाधान की तरह दिखता है जो एंड्रॉइड पहले से ही समायोजन-आकार के साथ करता है

इन दोनों अंतरों के बीच एक सामंजस्य बनाना नौकरी का एक नरक है

हम इन सभी समस्याओं को रोकने के लिए अब सक्रिय रूप से कीबोर्ड सुधारों पर काम कर रहे हैं।

यह बग दुर्भाग्य से 1717 की रात में ठीक नहीं किया गया है।

एक बात जो @tlancina ने देखी वह यह है कि नवीनतम टैप फिक्स के साथ, यदि आप सीधे इनपुट पर क्लिक करते हैं तो यह हेडर को ऊपर नहीं ले जाता है। इसलिए मुझे लगता है कि हमने इस मुद्दे का कुछ हिस्सा हल कर लिया है। हालाँकि, यदि आप उस लेबल को टैप करते हैं जो एक इनपुट को लपेटता है, तो 300ms बाद में यह बदसूरत देशी स्क्रॉल करेगा। जिस तरह से डिफ़ॉल्ट आयोनिक सीएसएस काम करता है, रैपिंग लेबल और वास्तविक इनपुट के बीच अंतर बताना मुश्किल है, इसलिए यह उस कारण का हिस्सा हो सकता है जो हमेशा काम नहीं करता है। मैं प्रत्येक डिवाइस पर इन मुद्दों को डीबग करने में सहायता के लिए इस परीक्षण पृष्ठ का उपयोग कर रहा हूं।

अभी मुझे लगता है कि इसका कारण यह है कि हम किसी लेबल क्लिक पर डिफ़ॉल्ट को नहीं रोक रहे हैं। यदि हम किसी इनपुट को लपेटने वाले लेबल पर e.preventDefault() करते हैं तो कीबोर्ड पहले टैप पर स्वचालित रूप से पॉपअप नहीं होगा। मैं इसे और अधिक देख लूंगा, धन्यवाद।

@adamdbradley नाइटलीज़ में आने पर इस फिक्स के लिए एक और परीक्षक के रूप में स्वेच्छा से काम करता है। धन्यवाद।

दुर्भाग्य से यह समस्या अभी तक 1.0.0 बीटा2 में हल नहीं हुई है।

@CoenWarmer हम मुद्दों से अवगत हैं और अभी भी इस पर काम कर रहे हैं। साथ ही, ध्यान रखें कि किसी भी कीबोर्ड समस्या की रिपोर्ट करते समय कृपया प्लेटफ़ॉर्म, प्लेटफ़ॉर्म संस्करण प्रदान करें, और यह समस्या मोबाइल ब्राउज़र, एमुलेटर या कॉर्डोवा में है, और यदि यह कॉर्डोवा है, तो क्या यह पूर्ण स्क्रीन है या नहीं। अन्य उपयोगी जानकारी में आपके द्वारा टैप किया गया तत्व शामिल है, जैसे कि लेबल या इनपुट, क्या आपको इनपुट प्राप्त करने के लिए किसी भी समय मैन्युअल रूप से स्क्रॉल करना पड़ता है, क्या मेटा व्यूपोर्ट में ऊंचाई = डिवाइस-ऊंचाई है या नहीं, और यदि तत्व है नीचे जहां वर्चुअल कीबोर्ड अंततः दिखाएगा, क्या यह आधा दिखा रहा है कि कीबोर्ड कहां दिखाएगा, या यह ऊपर है और स्क्रॉल करने की कोई आवश्यकता नहीं है। धन्यवाद

पर मुलाकात की:

• आईओएस7.1.1.1
• आयनिक 1.0.0 बीटा 2
• कॉर्डोवा में
• सिम्युलेटर और डिवाइस में
• पूर्ण स्क्रीन नहीं
• कोई लेबल इस्तेमाल नहीं किया गया, केवल इनपुट
• इनपुट फ़ील्ड पर फ़ोकस होने के बाद दृश्य को स्क्रॉल किया जा सकता है, यदि इनपुट फ़ील्ड पर कोई फ़ोकस नहीं है तो दृश्य को स्क्रॉल नहीं किया जा सकता है
• फोकस होने के तुरंत बाद दृश्य स्क्रॉल नहीं होता है और कीबोर्ड पॉप अप हो जाता है। जब इनपुट फ़ील्ड पर फ़ोकस हो जाता है तो आप अपनी अंगुली को इनपुट फ़ील्ड पर रख सकते हैं और दृश्य को वेबव्यू से बाहर ले जाने के लिए ऊपर खींच सकते हैं।

एंड्रॉइड 4.4 और 4.3 पर भी होता है, 1.0.0 बीटा 2 का भी उपयोग कर रहा है। ठीक वैसी ही परिस्थितियाँ जैसे iOS7.1. तो जब इनपुट फ़ील्ड फोकस हो जाता है और कीबोर्ड पॉप अप हो जाता है, कुछ भी गलत नहीं है, यह तब होता है जब इनपुट फोकस हो जाता है और फिर आप अपनी उंगली इनपुट फ़ील्ड पर रखते हैं और इसे ऊपर या नीचे खींचना शुरू करते हैं, जब आप सभी सामग्री को दृश्य से बाहर ले जा सकते हैं . बाद में स्क्रीनकास्ट करेंगे।

स्क्रीनकास्ट: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

बीटा 2 के बाद मुझे छोटी स्क्रीन (जैसे आईफोन 3 या आईफोन 4) पर यह समस्या है।

आईफोन 5 (ठीक है)

आईफोन 4 (समस्याएं)

@zelphir क्या आप कृपया एक कोडपेन प्रदान कर सकते हैं जो इस मुद्दे को दोहराता है? क्या वे दोनों आईओएस 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>

मुझे यकीन नहीं है कि आप जो कह रहे हैं वह अपेक्षित व्यवहार होने के बारे में मैं पूरी तरह से पालन करता हूं। अभी ऐसा लग रहा है कि हेडर के नीचे सब कुछ स्क्रॉल होने पर ऐप टूट रहा है। क्या मुझे इसके बजाय इनपुट फ़ील्ड को आयन-सामग्री के भीतर रखना चाहिए?

ठीक है, मान लीजिए कि आपके पास अपने पृष्ठ के निचले भाग तक पहुंचने वाले कई इनपुट की एक सूची है। यदि वे उस क्षेत्र के भीतर नहीं हैं जिसे जावास्क्रिप्ट का उपयोग करने के लिए स्क्रॉल किया जा सकता है, तो कीबोर्ड आने पर उन्हें कैसे देखा जा सकता है? मूल ब्राउज़र स्क्रॉलिंग का उपयोग करने का एकमात्र तरीका है, जो सामग्री को स्थानांतरित करके काम करता है - यह सब, हेडर सहित।

जब कोई इनपुट या फोकस करने योग्य क्षेत्र आयनिक स्क्रॉल व्यू के भीतर होता है, तो हम डिफ़ॉल्ट स्क्रॉलिंग को रोकते हैं और हेडर को जगह में छोड़कर इसे देखने के लिए जावास्क्रिप्ट का उपयोग करते हैं।

मैं दुर्भाग्य से एक यूआई-राउटर विशेषज्ञ नहीं हूं, लेकिन पृष्ठ पर सभी सामग्री के आसपास आयन-सामग्री रखने का प्रयास करें और देखें कि क्या इससे मदद मिलती है।

मैं अब समझता हूं- लेकिन क्या इससे बैक बटन सहित पूरी नेवी-बार गायब होने का अवांछनीय दृश्य प्रभाव नहीं होता है?

मेरे उपयोग के मामले में और अधिक, अगर मैं आयन-सामग्री के भीतर इनपुट फ़ील्ड डालता हूं, तो मैं कैसे सुनिश्चित कर सकता हूं कि वे हेडर बार के नीचे शीर्ष पर स्थिर रहें ताकि संक्रमण एनिमेशन आईओएस और एंड्रॉइड पर सही तरीके से काम कर सकें?

हाँ एक इनपुट के लिए जॉगलिंग टैब और स्क्रॉल करने योग्य क्षेत्र को बनाए रखने की स्थिति बहुत मुश्किल लगती है, और ऐसा अक्सर होता है। @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 संस्करणों पर होती है। यदि आप किसी तत्व पर स्थिति: स्थिर का उपयोग करते हैं और आप उस दृश्य से दूर संक्रमण करते हैं, तो एंड्रॉइड 4.1 से 4.3 पर (मेरा मानना ​​​​है कि 100% निश्चित नहीं है, जांच करेगा) एनीमेशन शुरू होने के बाद वे तत्व लॉक रहेंगे। तो सभी तत्व (आयन-सामग्री, टैब, हेडर बार, आदि) बाईं ओर बढ़ना शुरू कर देंगे, लेकिन आपने जो तत्व दिया है वह स्थिति: स्थैतिक एनीमेशन पूरा होने तक उसी स्थान पर रहेगा। आईओएस पर ऐसा नहीं होता है। यही कारण है कि मैं कहीं भी स्थैतिक स्थिति का उपयोग करने में संकोच कर रहा था।

@tlancina ने इनपुट तत्व को एक आयन-सामग्री में डालने का प्रयास किया, और शेष सामग्री को दूसरे, दूसरी आयन-सामग्री में रखने का प्रयास किया। दुर्भाग्य से इनपुट तत्व में दर्ज किया गया कोई भी इनपुट अब अन्य आयन-सामग्री में मौजूद एनजी-रिपीट को फ़िल्टर नहीं करेगा। अन्य सुझाव?

@CoenWarmer ऐसा इसलिए है क्योंकि आयन-सामग्री एक बच्चे का दायरा बनाती है।

दोनों सामग्री पर नियंत्रक डालने का प्रयास करें। यदि नियंत्रक है, तो इनपुट के लिए केवल एक आदिम का उपयोग न करें।

आप स्कोप इनहेरिटेंस की 'डॉट' समस्या से पीड़ित हैं - एक अलग चाइल्ड स्कोप में एक आदिम चाइल्ड स्कोप पर सेट किया जा रहा है, पैरेंट स्कोप पर नहीं। क्या आपको पता है कि मेरा क्या मतलब है? यदि आप नहीं जानते हैं, तो मुझे पता है और मैं एक लिंक ढूंढूंगा/इसे समझाऊंगा।

इससे परिचित नहीं, दुर्भाग्य से नहीं। साझा करने के लिए परवाह? :)

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

आह, हाँ, यह समझ में आता है! इसे एक और जाने देंगे: +1:

अरे @adam। कैसे एक इनपुट के साथ एक पाद लेख के बारे में? चूंकि यह स्क्रॉल क्षेत्र के बाहर है, इसलिए यह समस्या भी पैदा करने वाला है। इसके आसपास कोई रास्ता?

मुझे iPad (7.1) पर भी यह समस्या है। मैंने देखा कि आयनिक हाल के परिवर्तनों के बाद व्यूपोर्ट में ऊंचाई = डिवाइस-ऊंचाई जोड़ता है यदि यह सेट नहीं है।
इस संपत्ति के कारण व्यूपोर्ट लगभग 200px (ऊंचाई) से बड़ा हो जाता है और पूरी तरह से स्क्रॉल करने योग्य होता है।
जब मैं इसे हटा देता हूं तो यह काम करता है।
मैं इसे ठीक कर सकता हूं अगर मैं किसी भी तरह से .view और .pan को स्थिति में सेट करता हूं: निश्चित और शरीर को स्थिति: स्थिर, लेकिन मुख्य व्यूपोर्ट अभी भी बड़ा है और अगर मैं उंगली ऊपर और नीचे ले जाता हूं तो दाईं ओर स्क्रॉलबार दिखाता है।

वैसे ... यह इनपुट फोकस से स्वतंत्र है। इनपुट फोकस केवल स्क्रॉल स्थिति को आगे बढ़ाता है ताकि आप परिणाम देख सकें।

हे दोस्तों, यहाँ वर्तमान प्रगति क्या है?
मैंने एक कस्टम आयनिक फ़ाइल बनाई और उसमें से 'ऊंचाई = डिवाइस-ऊंचाई' जोड़ हटा दी।
इस बदलाव के बाद सब कुछ ठीक काम करता है। अब किसी CSS सुधार की आवश्यकता नहीं है और इनपुट फ़ील्ड टैप पर फ़ोकस सही ढंग से काम कर रहा है।
मैं आईओएस पर कीबोर्ड प्लगइन का भी उपयोग कर रहा हूं और निम्न कार्य करता हूं:

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

इनपुट को एक अलग आयन-सामग्री में रखने से इनपुट फोकस होने पर वेबव्यू के नीचे हेडर बार सहित पूरे दृश्य को स्क्रॉल करने योग्य बनाने के व्यवहार को नहीं रोकता है। मेरे पिछले स्क्रीनकास्ट के समान व्यवहार होता है: https://www.dropbox.com/s/2g6b41n3s3vpj0s/2.mov

@ D3CK3R हम सभी अलग-अलग व्यूपोर्ट परिदृश्यों को सीधा करने पर काम कर रहे हैं :)

@CoenWarmer क्या आप आयोनिक कीबोर्ड प्लगिन को चलाने पर विचार करेंगे? हमने इसे अभी सार्वजनिक किया है और मैं यह देखने के लिए उत्सुक हूं कि यह स्क्रॉल व्यू के बाहर इनपुट पर कैसे काम करेगा।

आप इसे अपने कॉर्डोवा प्रोजेक्ट के अंदर से cordova plugin add https://github.com/driftyco/ionic-plugins-keyboard.git चलाकर इंस्टॉल कर सकते हैं।

@tlancina यह काम करता है! जब मैंने प्लगइन जोड़ा तो सामग्री अब व्यूपोर्ट के तहत खींचने योग्य नहीं है जब इनपुट पर ध्यान केंद्रित किया जाता है। बहुत बढ़िया!!

क्या प्लगइन उत्पादन के लिए तैयार है? मैं इसे जल्द से जल्द तैनात करना पसंद करूंगा क्योंकि यह प्रोजेक्ट अभी स्टोर पर प्रकाशित हुआ है।

@CoenWarmer आपको पता नहीं है कि आपकी आखिरी टिप्पणी देखकर मुझे कितनी खुशी हुई! बढ़िया काम @tlancina!

@adamdbradley @tlancina

हां!!!

@CoenWarmer हाँ iOS के लिए यह उत्पादन के लिए तैयार है। हमारे पास ऐप में इसका एक पुराना संस्करण है जिसे अभी ऐप स्टोर में स्वीकार किया गया है, और मुझे नहीं लगता कि हमने जो स्क्रॉल सामग्री जोड़ी है वह अस्वीकृति का कोई कारण है। वास्तव में खुशी है कि यह आपके लिए काम कर रहा है!

बंद करना अच्छा है? @tlancina

यह अभी भी बीटा14 रिलीज में एक मुद्दा था। कुछ व्यापक डिबगिंग के बाद मुझे अंततः फिक्स मिल गया।

मेरे मामले में, यह मेरे 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 से पहले वापस शुरू कर दिया है, इसलिए शायद यह कुछ विरासत एचटीएमएल था जिसे मैंने कभी नहीं देखा।

आशा है कि यह किसी की मदद करता है।

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

प्रारंभिक दृश्य

टेक्स्ट एरिया पर क्लिक करने के बाद

यह प्रदर्शित करते हुए कि टेक्स्ट क्षेत्र में फोकस होने पर मैं स्क्रॉल कर सकता हूं।

अभी भी एक समस्या है दोस्तों, कृपया @ajoslin @adamdbradley . की मदद करें

आईओएस सिम्युलेटर - आईफोन 6 / आईओएस 8.3
आयनिक संस्करण 1.0.0-rc.0
प्लगइन्स स्थापित:

• कॉम.आयनिक.कीबोर्ड
• com.phonegap.plugins.PushPlugins
• org.apache.cordova.console
• org.apache.cordova.device
• org.apache.cordova.file
• org.apache.cordova.geolocation
• org.apache.cordova.media

मोडल से एचटीएमएल:

<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
तुम्हें कोशिश करनी चाहिए

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.

कीबोर्ड से आईओएस नोट

यह एक आकर्षण की तरह काम करेगा।

क्या मैं cordova.plugins.Keyboard.disableScroll(true) सेट कर सकता हूं और फिर भी दृश्य को मेरे इनपुट पर स्क्रॉल करने की अपेक्षा कर सकता हूं?
अगर मैं स्क्रॉल अक्षम करता हूं, तो स्टेटसबार अब और धक्का नहीं दिया जाता है, लेकिन कीबोर्ड मेरे इनपुट फ़ील्ड को ओवरलैप करता है।

@michaelknoch जब तक आपका इनपुट स्क्रॉल व्यू (जैसे आयन-सामग्री) के भीतर है, तब तक इसे स्वचालित रूप से स्क्रॉल करना चाहिए, जब तक कि आपने ionic.keyboard.disable() को कॉल नहीं किया हो।

@michaelknoch मुझे लगता है कि आप कीबोर्ड-अटैच पूछ रहे

@LightZam लेकिन यह केवल आयन-पाद लेख बार का समर्थन करता है और मेरा इनपुट आयन-दृश्य में मेरी सामग्री के अंदर है

@tlancina क्या मुझे अपनी सामग्री ionScroll के साथ लपेटनी चाहिए? http://ionicframework.com/docs/api/directive/ionScroll/

@michaelknoch आपको इसकी आवश्यकता नहीं है, क्योंकि ion-content में पहले से ही एक स्क्रॉल दृश्य है। यदि आप एक साधारण कोडपेन बना सकते हैं जो समस्या को पुन: उत्पन्न करता है, साथ ही आप किस फोन और ओएस का उपयोग कर रहे हैं, साथ ही साथ ionic info कमांड से आउटपुट (यदि आप सीएलआई का उपयोग कर रहे हैं) मैं लूंगा एक नज़र।

@tlancina मैं इस मुद्दे का सामना कर रहा हूं
कॉर्डोवा सीएलआई: 5.2.0
आयनिक संस्करण: 1.1.0
आयनिक सीएलआई संस्करण: 1.6.4
आयोनिक ऐप लिब संस्करण: 0.3.8
आईओएस-तैनाती संस्करण: 1.7.0
आईओएस-सिम संस्करण: 4.1.1
ओएस: मैक ओएस एक्स योसेमाइट
नोड संस्करण: v0.12.7
Xcode संस्करण: Xcode 7.0 बिल्ड संस्करण 7A176x
फोन - आईफोन 4एस, आईओएस 7.0.6

अगर मैं "cordova.plugins.Keyboard.disableScroll(true)" हेडर रखता हूं तो पुश आउट न करें, लेकिन कीबोर्ड मेरे टेक्स्टरेरा के शीर्ष पर आता है। और मैंने टेक्स्टरेरा (एमएसडी-लोचदार के साथ प्रयोग करके) अंदर रखा, व्हाट्सएप जैसी समान शैली प्राप्त करने के लिए, इसलिए इसकी बाहरी आयन-सामग्री

और अगर मैं कीबोर्ड-अटैच का उपयोग करता हूं तो यह एमएसडी-लोचदार के साथ खराब हो जाता है :(
कोई सुझाव ?

आयनिक के साथ प्रयास किया। प्लेटफॉर्म। फुलस्क्रीन ()
लेकिन कोई भाग्य नहीं ... यह पूर्णस्क्रीन() आईओएस में एक और मुद्दा बनाता है ...
यह हेडर की ऊंचाई को कम करता है ... क्योंकि जब आप फुलस्क्रीन () को कॉल करते हैं तो यह सीएसएस लागू नहीं होता है
.platform-ios.platform- cordova:not (.fullscreen) .bar- header:not (.bar-subheader) {ऊंचाई: 64px; }

andorid में सब कुछ ठीक था।

कॉर्डोवा को 6.0.0 में अपग्रेड करने के बाद मुझे लगभग एक ही समस्या हो रही है, अर्थात्, स्टेटसबार प्रकट होता है और फॉर्म फ़ील्ड पर ध्यान केंद्रित होने पर हेडर बार को ओवरलैप करता है। यह समस्या मेरे Android डिवाइस पर मौजूद है। मैंने अभी तक आईओएस डिवाइस की कोशिश नहीं की है। क्या कोई pls मदद कर सकता है?

कॉर्डोवा सीएलआई: 6.0.0
गल्प संस्करण: सीएलआई संस्करण 3.8.11
गल्प लोकल: लोकल वर्जन 3.8.11
आयनिक संस्करण: 1.0.0-rc.5
आयोनिक सीएलआई संस्करण: 1.7.14
आयोनिक ऐप लिब संस्करण: 0.7.0
आईओएस-तैनाती संस्करण: 1.8.3
आईओएस-सिम संस्करण: 5.0.4
ओएस: मैक ओएस एक्स एल कैपिटान
नोड संस्करण: v0.12.2
Xcode संस्करण: Xcode 7.2 बिल्ड संस्करण 7C68

कॉर्डोवा 6.0.0 में अपग्रेड करने के बाद एंड्रॉइड पर मुझे यह समस्या हो रही थी और प्लगइन की AndroidFullScreen.immersiveMode विधि को कॉल करके इसे हल किया https://github.com/mesmotronic/cordova-plugin-fullscreen

// सिस्टम UI छिपाएं और इसे छिपा कर रखें (केवल Android 4.4+)
AndroidFullScreen.immersiveMode(successFunction, errorFunction);

यह समस्या अभी भी हो रही है, पूर्ण स्क्रीन पर जाकर इसे हल करना उचित समाधान नहीं है क्योंकि ऐप को वास्तव में पूर्ण स्क्रीन पर नहीं चलना चाहिए, लेकिन केवल परीक्षण के लिए मैंने कोशिश की, और जब ऐप पूर्णस्क्रीन मोड में जाता है, तो यह है अभी भी "बड़ा" स्क्रीन है, इसलिए आप स्टेटस बार के नीचे जाने वाले हेडर के साथ इसे थोड़ा सा स्क्रॉल कर सकते हैं ...
कृपया सहायता कीजिए!

इस मुद्दे को लेकर? क्या आसपास कोई काम है?

Ionic 2 में iOS के साथ भी यही समस्या है

वातावरण
कॉर्डोवा सीएलआई: 6.0.0
आयनिक संस्करण: 2.0.0-बीटा.3
आयनिक सीएलआई संस्करण: 2.0.0-बीटा.19
आयोनिक ऐप लिब संस्करण: 2.0.0-बीटा.9
आईओएस-तैनाती संस्करण: स्थापित नहीं
आईओएस-सिम संस्करण: 5.0.6
ओएस: मैक ओएस एक्स एल कैपिटान
नोड संस्करण: v5.7.1
Xcode संस्करण: Xcode 7.2.1 बिल्ड संस्करण 7C1002

जैसा कि आप देख सकते हैं कि आयोनिक ऐप में स्टेटस बार और हेडर के बीच कोई कमरा/पैडिंग नहीं है।

कीबोर्ड के साथ नया/पुराना मुद्दा यहां फिर से है। जब मैं टैपिंग द्वारा इनपुट पर ध्यान केंद्रित करने पर स्क्रॉलिंग को अक्षम कर सकता हूं, तो वर्चुअल कीबोर्ड विशेष बटन के साथ फॉर्म फ़ील्ड पर ध्यान केंद्रित करने पर हेडर स्क्रॉलिंग आउट ऑफ व्यू के साथ पुराना मुद्दा फिर से मौजूद है। एंड्रॉइड कीबोर्ड पर नीचे दाईं ओर एक हरा बटन होता है जो फ़ॉर्म में अगले इनपुट पर स्विच करने की अनुमति देता है। यहां तक ​​​​कि अगर मैंने स्क्रॉलिंग बंद कर दी है, तो बटन केंद्रित इनपुट को दृश्यमान बनाने के लिए दृश्य को स्क्रॉल करता है और परिणामस्वरूप हेडर स्क्रीन से बाहर हो जाता है।

इसका परीक्षण करने के लिए पहला इनपुट दृश्य में होना चाहिए और दिखाई देने वाले कीबोर्ड के साथ केंद्रित होना चाहिए और दूसरा इनपुट फोल्ड (कीबोर्ड के नीचे कहीं) के नीचे होना चाहिए। अब हरे बटन को टैप करने पर (जैसा कि चित्र में है) दृश्य स्क्रॉल करने में परिणत होता है और हेडर स्क्रीन से बाहर चला जाता है।

कॉर्डोवा 6.3.0
आयनिक-प्लगइन-कीबोर्ड 2.2.1
Android 5 . के साथ डिवाइस पर परीक्षण किया गया
Android 24.0.1 . के लिए बनाएं

क्या आपके पास इस बटन को बंद करने या समस्या को ठीक करने का कोई विचार है? मैं 100% निश्चित नहीं हूं, लेकिन मुझे संदेह है कि यह कॉर्डोवा के कुछ 6+ संस्करण में अपग्रेड होने के बाद शुरू हुआ।

@rafaellop क्या आपने इस मुद्दे को हल किया?

आईओएस पर फोन/कैमरा स्क्रीन से फाइल अपलोड होने पर यह समस्या दिखाई देती है।

मुझे ईमेल कंपोज़र के साथ यह समस्या आ रही है

संपादित करें उन लोगों के लिए जो सब कुछ करने के बाद भी इस समस्या का सामना कर रहे हैं, । ऐसा लगता है जैसे 4.3 ने कुछ अजीब व्यवहार पेश किया हो। यहां तक ​​​​कि सबसे हालिया कॉर्डोवा-आईओएस नाइटलीज़ ने मेरी समस्या को ठीक नहीं किया, लेकिन इसे ठीक करने के लिए इसे ठीक कर दिया।

यह मुद्दा अभी भी मेरे लिए भी हो रहा है, यह हल नहीं हुआ है।

IOS में, यदि हम स्टेटसबार पर टैप करते हैं तो IONIC2 में पूरी आयन-सामग्री ब्लिंक हो जाएगी। इस समस्या को कैसे हल करें। कृपया सुझाव दें।
शुक्रिया।

कॉर्डोवा-आईओएस@4.2.1 पर वापस लौटने से मेरी मदद नहीं हुई, दुख की बात है। देशी कैमरा फ़ाइल लाइब्रेरी का उपयोग करने के बाद भी यही समस्या है।

बस एक और पोस्ट से एहसास हुआ कि मैं 2.2.1 से 2.2.0 में कॉर्डोवा-स्टेटसबार प्लग को डाउनग्रेड करने में सक्षम था और इसने समस्या को ठीक कर दिया। ऐसा लगता है कि यह मेरे मामले में समस्या पैदा करने वाला स्टेटसबार प्लगइन था।

मेरे पास यह मुद्दा था

• आयनिक 3.9.2
• कॉर्डोवा-आईओएस 4.4.0
• आईओएस 10.3
• आईफोन उपकरणों और अनुकरणकर्ताओं का वर्गीकरण

मेरे पास height: 100%; (जो सभी आयन-सामग्री थी) के साथ एक टेक्स्टरेरा था और जब भी टेक्स्टरेरा केंद्रित होता था तो आयन-हेडर दृश्य से ज़ूम आउट हो जाता था। मेरा फिक्स इसे height: auto; min-height: 25%; बदलना था और टेक्स्टरेरा को height: 100%; margin: 0; padding: 0; और (click)=focusTextArea() साथ एक div के अंदर रखना था। किंडा जानकी और मुझे एक बेहतर समाधान पसंद आएगा लेकिन यह अभी के लिए ठीक काम करता है: +1:

कृपया इस प्लगइन का उपयोग करें आयनिक कॉर्डोवा प्लगइन कॉर्डोवा-प्लगइन-आयनिक-वेबव्यू - सेव जोड़ें। इसने मेरी समस्या का समाधान किया धन्यवाद

मैंने ईमेल-संगीतकार प्लगइन के संयोजन में एक ही समस्या का अनुभव किया।

मैंने कॉर्डोवा-प्लगइन-स्टेटसबार को संस्करण 2.2.1 से 2.3.0 में अपग्रेड करके समस्या का समाधान किया।

@ jvhe123 मैंने अभी ऐसा करने की कोशिश की लेकिन ऐसा लगता है कि v2.3.0 मौजूद नहीं है, क्या आपका मतलब v2.2.3 है?

@ ग्लेनर4

• कॉर्डोवा-प्लगइन-कीबोर्ड 1.2.0
• आयनिक-प्लगइन-कीबोर्ड 2.2.1

मुझे iPhone X के लिए यह समस्या हो रही थी। कीबोर्ड खोलने से हेडर ऊपर और लगभग पृष्ठ से बाहर हो गया।

मैंने प्रभावित पृष्ठ के लिए अपनी जावास्क्रिप्ट फ़ाइल में एक ईवेंट लिस्टनर डालकर इसे ठीक किया:

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

इसने मेरे लिए काम किया, उम्मीद है कि यह आप में से किसी के लिए भी काम कर सकता है।

मुद्दे के लिए धन्यवाद! मूल मुद्दे से प्रासंगिक नहीं होने वाली टिप्पणियों को रोकने के लिए इस मुद्दे को लॉक किया जा रहा है। यदि यह अभी भी Ionic के नवीनतम संस्करण के साथ एक समस्या है, तो कृपया एक नया मुद्दा बनाएं और सुनिश्चित करें कि टेम्पलेट पूरी तरह से भरा हुआ है।