jQuery-UI का स्वतः पूर्ण प्रदर्शित न होना, z-index समस्या

Question

मैं वर्तमान में अपने क्लाइंट webshop में jQuery UI के स्वतः पूर्ण को लागू कर रहा हूं। समस्या यह है: जिस तत्व में स्वत: पूर्ण रहता है, उसके पास उच्च z- अनुक्रमणिका है तो स्वतः पूर्ण का z- सूचकांक। मैंने मैन्युअल रूप से स्वतः पूर्ण z- इंडेक्स सेट करने की कोशिश की, लेकिन मुझे लग रहा है कि jQuery UI इसे अधिलेखित कर रहा है।

वास्तव में मेरा सवाल स्वत: पूर्ण सुझाव सूची गलत z- इंडेक्स की नकल है , मैं कैसे बदल सकता हूं? , लेकिन चूंकि इसका कोई जवाब नहीं था इसलिए मैंने इसे एक और कोशिश देने के बारे में सोचा।

किसी भी मदद का स्वागत है!

Martijn

Comments

क्या इससे आपको मदद मिलेगी? stackoverflow.com/questions/3549860/…

— टिम

चूंकि कोई कोड उदाहरण नहीं है, इसलिए मैं z- इंडेक्स सेट करने की सिफारिश कर सकता हूं जैसा कि आपने पहले किया था और इसे सेट करने की कोशिश की थी!important

— इगोर डिमॉव जूल

मुझे भी यही समस्या हो रही है, लेकिन बग क्रोम में ही आ रहा है। यहां कोई समाधान काम नहीं कर रहा है। क्या कोई मेरी मदद कर सकता है?

— Nivs

Answer 1

का उपयोग करें z-indexऔर!important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}  

Comments

जब से मैंने इस प्रश्न को पोस्ट किया है, तब तक कुछ समय हो गया है, लेकिन मुझे यह याद है कि जावास्क्रिप्ट (और इसलिए jQuery) सीएसएस गुणों को ओवरराइट करने में सक्षम था, भले ही वे "महत्वपूर्ण" के रूप में परिभाषित हों।

— मार्टिज़न

+1 का उपयोग करना; मेरे कस्टम स्टाइलशीट पर महत्वपूर्ण, मेरे लिए पूरी तरह से अच्छी तरह से काम किया और खुले () कॉलबैक का उपयोग करने की तुलना में बहुत बेहतर समाधान था।

— एलेक्स फेयरचाइल्ड

मैंने इस उत्तर को अपने पक्ष में स्वीकार कर लिया है, क्योंकि मैं मानता हूं कि यह समाधान बहुत अच्छा है। हालांकि मैंने जवाब की जाँच नहीं की है ..

— मार्टिज़न

मैं jQuery के लिए नया हूं और यह उत्तर बहुत अच्छा है। मेरे लिए काम किया। मुझे यह पता लगाने में परेशानी हुई कि कहां-कहां-स्वत: पूर्ण था, लेकिन अंत में इसे jquery-ui.css में मिला और इसे z- इंडेक्स और वायोला को काम दिया!

— अस्तुति

बहुत बढ़िया जवाब। मेरे साथ भी काम किया। बस tidbits के एक जोड़े को जोड़ने के लिए। सबसे पहले, स्वत: पूर्ण डेटा ui-autocomplete नामक एक वर्ग के भीतर समाहित है, जिसे बाद में ऊपर के रूप में आपकी सीएसएस में स्टाइल किया जा सकता है। दूसरा, यदि आप बूटस्ट्रैप के साथ स्वतः पूर्ण का उपयोग कर रहे हैं, तो हमेशा शीर्ष पर एक मेनू 1030 का z-index होता है, इसलिए आपको यह 1031 बनाने की आवश्यकता होगी। Great sol'n। धन्यवाद।

— रैंडी ग्रीनकोर्न

Answer 2

खोज करते समय मुझे यह विषय मिला (http://forum.jquery.com/topic/alternating-style-on-autocomplete)। जाहिरा तौर पर स्वतः पूर्ण बॉक्स की शैली को बदलने का एकमात्र तरीका जावास्क्रिप्ट के माध्यम से कर रहा है:

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

Comments

तुम झूठे क्यों लौट रहे हो?

— नॉयो

ईवेंट हैंडलर में सामान्य प्रतिमान यह है कि गलत तरीके से लौटने से किसी ईवेंट को बुदबुदाती है। हालांकि चार साल बाद मुझे इस बात का कोई पता नहीं है कि क्या वास्तव में इस स्थिति में यह आवश्यक था ..

— Martijn

प्रतिक्रिया के लिए धन्यवाद, भले ही यह वर्षों बाद हो! दरअसल, इस मामले में अपने की जरूरत नहीं है, और हो सकता है दूसरों में अवांछित व्यवहार .. किसी भी मामले में, इस मुद्दे को एक मानक समाधान अब भी कारण ( ui-frontवर्ग + appendToविजेट विकल्प): api.jqueryui.com/theming/stacking-elements

— नॉयो

Answer 3

पेरेंट डिव के z-इंडेक्स को बदलें, स्वतः पूर्ण मेनू में डिव का z-index + 1 होगा

Comments

स्वत: पूर्ण को शरीर की सामग्री के अंत में जोड़ा जाता है, इसलिए इसके बाद बॉडीज z-index + 1 होगा

— Marius

@ मार्स, आप appendToमेनू मार्कअप को बताने के लिए विकल्प का उपयोग कर सकते हैं कि कहां जाना है, अन्यथा आप ui-frontइनपुट के मूल तत्वों में से एक में कक्षा जोड़ सकते हैं ।

— नोयो

एक और बात: माता-पिता को रिश्तेदार स्थिति ('स्थिति: रिश्तेदार') का उपयोग करना चाहिए अन्यथा jQuery अपने z- इंडेक्स ( बगेसजक्वेरीयू / टिकट / 5489 देखें ) का निर्धारण करने में सक्षम नहीं होगा

— फेलिक्स श्वार्ज

Answer 4

के सीएसएस में jQuery UI:

.ui-front { z-index: 9999; }

Comments

StackOverFlow.com में आपका स्वागत है यह एक टिप्पणी या अधिक विस्तृत जवाब होना चाहिए।

— डिएगो सी नस्सिमेंटो

यह गलत है, जब jquery ui को कुछ नया पॉपअप करने की आवश्यकता होती है, तो यह पिछले z- इंडेक्स को लेता है और इसे 1 से बढ़ाता है, 9999 का उपयोग करके इसे केवल एक बार काम करता है, अगले ui तत्व में 10.000 का z-इंडेक्स होगा जिससे फिर से समस्या उत्पन्न होगी।

— एंड्रिया

Answer 5

इसे आज़माएं, आप रन-टाइम या इनिशियलाइज़ेशन पर z- इंडेक्स में फेरबदल कर सकते हैं

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

Answer 6

यदि आप स्वतः पूर्ण पाठ इनपुट पर एक उच्च z-सूचकांक लागू करने में सक्षम हैं तो यह आपकी समस्या का समाधान है।

jQuery UI स्वत: पूर्ण विकल्प सूची उस पाठ इनपुट के z- इंडेक्स को ले कर उसके z- इंडेक्स वैल्यू की गणना करती है जो उस से जुड़ा हुआ है और उस मान में 1 जोड़ता है।

तो आप पाठ इनपुट को 999 का एक z- इंडेक्स दे सकते हैं ऑटोकॉम्पट में 1000 का जेड-इंडेक्स मूल्य होगा

Http://bugs.jqueryui.com/ticket/5489 से लिया गया

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

Answer 7

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

Answer 8

यह भी देखें कि आप आइटम को कहां जोड़ रहे हैं। मैं इस समस्या के सामने आया जब मैंने एक आंतरिक div में स्वत: पूर्ण जोड़ा, लेकिन जब मैंने स्वतः टैग को शरीर टैग में जोड़ा, तो समस्या दूर हो गई।

Answer 9

यदि आप jquery-ui संवादों का उपयोग कर रहे हैं, तो संवाद को आरंभ करने के लिए सावधान रहें स्वतः पूर्ण या संवाद के तहत स्वत: पूर्ण दिखाया जाएगा।

इस उत्तर को देखें जिंकरी यूआई स्वत: पूर्ण रूप से एक ui संवाद के अंदर - सुझाव नहीं दिखा रहा है?

Answer 10

इसे अपने सीएसएस (स्क्रिप्ट लोड करने से पहले) में वैसे भी आज़माएँ, फायरबग में नहीं:

.ui-selectmenu-menu {
    z-index:100;
}

मेरे मामले में यह काम करता है और जेड-इंडेक्स बनाता है जैसे: 100x (उदाहरण के लिए 1002)

Comments

किसी कारण से, CSS के माध्यम से z-index सेट करना काम नहीं कर रहा है। jQuery केवल यह बताता है कि यह स्वयं z- इंडेक्स मूल्य है। हालांकि एक समाधान मिल गया (नीचे उत्तर देखें)

— मार्टीजन

Answer 11

निम्नलिखित जोड़ें

.ui-autocomplete
{
    z-index:100 !important;
}

jquery-custom-ui.css फ़ाइल में (या यदि आप इसका उपयोग कर रहे हैं तो छोटा हो जाता है)।

Answer 12

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

.acResults
{
    z-index:1;
}

मेरे लिए z-index: 1 के साथ पर्याप्त था, आपके मामले में आपके लिए आवश्यक मूल्य निर्धारित करें।