Google मानचित्र स्वत: पूर्ण, इनपुट

Question

पर ठीक करें मैं अपने आयनिक ऐप में एक Google मानचित्र स्वत: पूर्ण इनपुट जोड़ने की कोशिश कर रहा हूं। स्क्रॉल करते समय यह बहुत अच्छी तरह से काम करता है। छवि में दिखाया गया है:

Position bug when scroll

तो मैं .pac-कंटेनर की स्थिति बदलती की तरह अलग अलग बातें करने की कोशिश की, लेकिन यह समस्या का समाधान नहीं है। जब मैं पृष्ठ का निरीक्षण करता हूं, ऐसा लगता है कि पृष्ठ के अंत में परिणाम कंटेनर लोड होता है, इसलिए ब्लॉक स्टिक को इनपुट बार में बनाना आसान नहीं होता है।

मैंने पहले से ही हर जगह खोज की है और किसी भी उपयुक्त समाधान को नहीं मिला है? क्या किसी को पता है कि इसे कैसे करना है? (यह वास्तव में इस तरह सिर्फ एक सरल कोड है:।

function initialize() { 
      var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']} 
     new google.maps.places.Autocomplete(
     (document.getElementById('autocomplete')), options); 
    } 

    initialize(); 

jsfiddle

अग्रिम धन्यवाद, रॉबिन Fourcade

Answer 1

मैं अब समस्या पुन: पेश करने में सक्षम था, समाधान बस position: relative जोड़ रहा है आपके रैपर box और position: absolute आपके #autocomplete इनपुट में

मुझे समाधान जांच 01 मिली Google टीम द्वारा प्रदान की गई।

मैं समाधान मैच के लिए your fiddle नवीनीकृत किया है, लेकिन यह इस प्रकार है:

आपका अपडेट किया गया सीएसएस:

.box { 
    position: relative; 
    height: 200vh; 
} 

#autocomplete { 
    width:350px; 
    position: absolute; 
} 

Answer 2

मैं एक ही समस्या है। मेरे समाधान किया गया था:

$('#inputContainer').scroll(function(){ 
    //Set new top to autocomplete dropdown 
    newTop = $('#autocompleteInput').offset().top + $('#autocompleteInput').outerHeight(); 
    $('.pac-container').css('top', newTop + 'px'); 
    } 
}); 

यह अद्यतन लटकती स्थिति जब कंटेनर स्क्रॉल।

Answer 3

मुझे एक ही समस्या का सामना करना पड़ा जब मैं स्क्रोल करने योग्य मोडल के अंदर एक फॉर्म पर स्वत: पूर्णता लागू कर रहा था। यदि आपके पास केवल एक स्वत: पूर्ण वस्तु है तो समाधान अपेक्षाकृत आसान है।

1. पहले सुनिश्चित करें कि आपके तत्व के माता-पिता की रिश्तेदार स्थिति है।

2. फिर आपको .pac-container का चयन करने और इसे अभिभावक को जोड़ने की आवश्यकता है।

   $("#autocomplete").parent() 
       .css({position: "relative"}) 
       .append(".pac-container"); 
   

3. अंत में .pac-कंटेनर छोड़ दिया और शीर्ष स्थान के लिए सेट अपने तत्व नीचे होने के लिए। के साथ स्टाइलशीट में इसे करने की आवश्यकता है! महत्वपूर्ण यह सुनिश्चित करने के लिए घोषणा overrides Google के कोड द्वारा निर्धारित इनलाइन शैलियों।

   // these values will need to be calculated based on your layout 
   .pac-container { 
       top: 40px !important; 
       left: 0px !important; 
   } 
   

यह स्पष्ट रूप से अभ्यस्त काम करता है, तो आप एक से अधिक स्वत: पूर्ण है एक ही पृष्ठ पर वस्तुओं। सौभाग्य से मैंने उस परिदृश्य को संभालने का एक तरीका निकाला और हाल ही में इसे jQuery plugin में प्रकाशित किया गया ताकि स्वत: पूर्ण पता एक हवा बन सके।

Answer 4

मैं समाधान की जांच the example स्थिति बग जब स्क्रॉल

function initAutocomplete() { 
     //....codes... 
     //....add this code just before close function... 
    setTimeout(function(){ 
       $(".pac-container").prependTo("#mapMoveHere"); 
      }, 300); 
} 

https://codepen.io/gmkhussain/pen/qPpryg