जेकरी तारीख पिकर जेड-इंडेक्स मुद्दा

Question

मेरे पास एक स्लाइड शो div है, और मेरे पास उस div के ऊपर एक तिथि-निर्धारण क्षेत्र है।

जब मैं डेटपीकर फ़ील्ड में क्लिक करता हूं, तो डेटस्पीकर पैनल स्लाइड शो डिव के पीछे दिखाई देता है।

और मैंने स्क्रिप्ट को इस प्रकार रखा है:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

इसलिए मैं CSS में datepicker का z-index नहीं बदल सकता। डेट-टिकर का z- इंडेक्स जो स्क्रिप्ट उत्पन्न कर रहा है, वह है 1 और मेरा स्लाइड शो div (जिसे थ्रू गूगोलिएजैक्सपी भी कहते हैं) z-index 5. है, इसलिए मुझे लगता है कि मुझे 5. से अधिक डेट पिकर का z-इंडेक्स बढ़ाना है। इसे बढ़ाने का कोई तरीका?

कोई मेरी मदद कर सकता है?

Comments

यहाँ समाधान stackoverflow.com/questions/11533161/…

— डेवलपर

Answer 1

निम्नलिखित शैली को 'इनपुट' टेक्स्ट एलिमेंट पर रखें position: relative; z-index: 100000;:।

डेटपिकर div इनपुट से z- इंडेक्स लेता है, लेकिन यह केवल तभी काम करता है जब स्थिति सापेक्ष हो।

इस तरह से प्रयोग करने से आपको jQuery UI से किसी भी जावास्क्रिप्ट को संशोधित करने की आवश्यकता नहीं है।

Comments

इसके साथ समस्या यह है कि आपका इनपुट अन्य तत्वों के ऊपर प्रदर्शित होगा, यह शायद ही कभी वांछित प्रभाव है

— सर्ज सगन

क्या यह माना जाता है कि जब डेटपिकर स्पैन से जुड़ा होता है, तो वह काम करता है ?

— rmoestl

position : relativeस्वीकार्य नहीं है और मेरी स्थिति में काम नहीं करता है। समाधान bellow ठीक काम करता है।

— कीवी

यह IE 11 ब्राउज़र पर काम नहीं कर रहा है। क्या यह ब्राउज़र विशिष्ट है?

— अश्विनी मददाला

यह समाधान, जबकि यह काम करता है, सभी स्थितियों के लिए मान्य नहीं है। ;: '{9999 महत्वपूर्ण! Z- सूचकांक} .ui-datepicker' सर्वश्रेष्ठ सीएसएस की एक पंक्ति के साथ overide करने के लिए है

— डैनियल तुंग

Answer 2

बस अपने सीएसएस उपयोग में ' .ui-datepicker{ z-index: 9999 !important;}' यहां 9999 को जो भी लेयर वैल्यू आप चाहते हैं, वह आपके डेटापिकर में उपलब्ध हो सकती है। position:relative;इनपुट तत्वों पर न तो किसी भी कोड पर टिप्पणी की जानी है और न ही ' ' सीएसएस जोड़ना है । क्योंकि इनपुट तत्वों के z- इंडेक्स को बढ़ाने से सभी इनपुट प्रकार बटन पर प्रभाव पड़ेगा, जो कुछ मामलों के लिए आवश्यक नहीं हो सकता है।

Comments

मुझे इसके datepickerबजाय का उपयोग करना थाui-datepicker

— एम स्मिथ

जावास्क्रिप्ट अभी भी बंद z- अनुक्रमित, मनमाने ढंग से स्टैकिंग संदर्भों का उपयोग करता है, और 2016 में क्रॉस-ब्राउज़र संगतता मुद्दे हैं? ActionScript 3 FTW (एक दशक पहले, और आज भी)।

— ट्राइंको

Answer 3

मेरे लिए काम किया

.hasDatepicker {
    position: relative;
    z-index: 9999;
}

Answer 4

मार्सीम उत्तर के आधार पर, इसने मेरे लिए काम किया:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

Comments

लेकिन यह केवल इनपुट को प्रभावित करता है न कि डेटपीक ओवरले?

— markyzm

मैं इस उदाहरण jqueryui.com/datepicker का उपयोग कर रहा हूं, जो डेटपेकर के लिए किसी आइकन का उपयोग नहीं करता है। इस समाधान के साथ मुझे बाकी वेब घटकों के साथ समस्या नहीं थी।

— लुकास

Answer 5

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

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

ध्यान दें कि आप "position": "relative"नियम को छोड़ नहीं सकते हैं , क्योंकि प्लगइन या तो दोनों नियमों या स्टाइलशीट के लिए इनलाइन शैली को देखता है, लेकिन दोनों को नहीं ।

dialog("widget")वास्तविक datepicker पॉप अप होने वाले है।

Comments

इस समस्या को JqueryUI स्क्रिप्ट में संबोधित किया जाना चाहिए और डिफ़ॉल्ट रूप से ओवरले को रोकने के लिए सेट किया जाना चाहिए। उपयोग मामलों के अधिकांश कैलेंडर इनपुट क्षमताओं को ओवरलेइंग करते हुए कोई भी इनपुट कभी नहीं चाहेंगे। यदि कैलेंडर को ओवरले करने के लिए इनपुट (या अन्य तत्वों) की आवश्यकता होती है, तो इस तरह के समाधान का उपयोग किया जाना चाहिए। यह कहने के बाद कि, @markyzm सबसे अच्छा समाधान IMO होगा क्योंकि आप इसे केवल तभी लागू करेंगे जब जरूरत हो।

— फ्रैंकओ

Answer 6

मेरे पास यह समस्या थी जिसे मैंने क्लिक पर उपयोग करके हल किया था:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

Comments

यह समाधान मेरे लिए पॉपअप विंडो पर पूरी तरह से काम करता है। धन्यवाद !

— darkomen

Answer 7

मेरे पास एक डायलॉग बॉक्स है जो उस पर डेटपिकर का उपयोग करता है। यह हमेशा छिपा रहता था। जब मैंने z- इंडेक्स को समायोजित किया, तो निचले रूप पर फ़ील्ड हमेशा डायलॉग पर दिखाई देती थी।

मैंने उन समाधानों के संयोजन का उपयोग किया जिन्हें मैंने समस्या को हल करने के लिए देखा।

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

पहले शो यह सुनिश्चित करता है कि चयनित होने पर डेटकिकर हमेशा शीर्ष पर होता है, लेकिन ऑनक्लोज़ यह सुनिश्चित करता है कि फ़ील्ड का z- इंडेक्स रीसेट हो जाता है, ताकि यह किसी अलग दिनांक के साथ बाद में खोले गए किसी भी संवाद पर ओवरलैप न हो।

Comments

यह समाधान महान है और मेरी समस्या का समाधान किया है। लेकिन इसे "onClose" भाग पर थोड़ा संपादित करें। मैं के $(this)बजाय डाल दिया $('.ui-datepicker')। इसलिए, यह z-index:0ui-datepicker वर्ग के साथ सभी इनपुट के बजाय "इस इनपुट" पर सेट होगा ।

— असुका १६

Answer 8

यहां देखें: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Answer 9

मेरे पास एक पृष्ठ है जहां डेटापीटर एक datatables.net टैबलेट के बटन के शीर्ष पर था। डेटाटैबल्स बटन में व्यक्तिगत डेटापिक डेट बटन की तुलना में एक उच्च जेड-इंडेक्स था। रोनी के जवाब के लिए धन्यवाद मैं स्थिति का उपयोग करके इस समस्या को हल करने में सक्षम था: रिश्तेदार; और z- इंडेक्स: 10000। धन्यवाद!

Answer 10

यह मेरे साथ तब हुआ जब मुझे थीम याद आ रही थी। सुनिश्चित करें कि थीम मौजूद है, या शायद थीम को फिर से लोड करें, और इसे अपने सर्वर पर पुनः लोड करें।

Answer 11

यही मेरी समस्या का हल है:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

Answer 12

वास्तव में आप प्रभावी रूप से अपनी सीएसएस में जोड़ सकते हैं .ui-datepicker{ z-index: 9999 !important;}लेकिन आप यूआई-डेटपिकर वर्ग के अंत में संशोधित jquery-ui.cssया jquery-ui.min.cssजोड़ सकते हैं z-index: 9999 !important;। दोनों चीजें मेरे लिए काम करती हैं (आपको केवल एक की जरूरत है ;-))

Answer 13

मेरे पास यह मुद्दा भी था, चूंकि डेटपिकर इनपुट के जेड-इंडेक्स का उपयोग करता है, मैंने निम्नलिखित सीएसएस जोड़ा

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

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

Answer 14

मुझे करना पड़ा

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}