jquery-ui datepicker z- इंडेक्स को बदलते हैं

Question

समस्या बहुत सीधे आगे है, हालांकि मैं एक कठिन समय लगा रहा हूं कि इसे कैसे हल किया जाए।

मैं एक jQuery-ui डेटपिकर का उपयोग कर रहा हूं साथ ही एक कस्टम बनाया "आईओएस स्टाइल ऑन / ऑफ टॉगल"। यह टॉगल कुछ बिल्कुल पोस्ट किए गए तत्वों का उपयोग करता है जो वर्तमान में मेरी तिथि पिकर के शीर्ष पर दिखाई दे रहे हैं।

नीचे 6 वीं को कवर करने वाले बदसूरत सर्कल को देखें ...

ऐसा करने का गंदा तरीका (कम से कम imo) मेरी एक स्टाइलशीट में एक शैली लिखने के लिए है, लेकिन मैं बहुत कुछ जावास्क्रिप्ट का उपयोग करता हूं जब पिकर इसे लॉन्च करने के लिए लॉन्च करता है।

मैंने पहले ही कोशिश की है

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

तथा

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

लेकिन ऐसा लगता है कि z- इंडेक्स हर बार डेटपिकर लॉन्च होने के बाद अधिलेखित हो जाता है।

किसी भी मदद की सराहना की है!

Comments

मैं जावास्क्रिप्ट की तुलना में अपने पृष्ठ के सीएसएस और अधिक क्लीनर पर एक सीएसएस! महत्वपूर्ण नियम पर विचार, के रूप में z- सूचकांक देखकर है एक सीएसएस संपत्ति और स्टाइल के लिए नहीं है। अगर मुझे एक जेएस समाधान करना था, तो यह एक styleटैग को सिर पर जोड़ देगा - न केवल सीएसएस में होने से आपका जेएस कोड छोटा और साफ रहता है, बल्कि सभी उदाहरणों के लिए भी लागू होता है।

— फ्राबिसीओ मैटे जूल

के संभावित डुप्लिकेट stackoverflow.com/questions/715677/...

— लांस

@ लांस नहीं है क्योंकि मैं पूछ रहा हूं कि सीएसएस में एक लाइन जोड़े बिना इसे गतिशील रूप से कैसे किया जा सकता है

— ग्रेग गुइडा

@ FabrícioMatté मुझे लगता है कि मैं सिर्फ एक jquery-ui बढ़त मामले के लिए कुछ बेवकूफ ओवरराइड के साथ मेरी सीएसएस ऊपर नहीं करना चाहता। styleसिर में टैग एक छोटे से क्या की तलाश में IM लेकिन क्या मैं सच में करना चाहते हैं डेट-पिकर तत्व की शैली विशेषता बदली है के करीब है।

— ग्रेग गुइडा

मैं पहले से ही शुरू की गई हर परियोजना में jQuery UI हैक के लिए केवल CSS फ़ाइल के निचले भाग में एक स्थान आरक्षित करता हूं, लेकिन हाँ, मैंने शुद्ध jQuery समाधान के साथ एक उत्तर प्रस्तुत किया जिसमें बताया गया है कि CSS एक क्लीनर समाधान क्यों होगा, अब आप चुन सकते हैं कि कौन सा उपयोग करने के लिए। =]

— फ्राबिसीओ मैट

Answer 1

प्रश्न में आपका जेएस कोड काम नहीं करता है क्योंकि jQuery styleहर बार जब आप इसे कॉल करता है तो डेटकॉपर विजेट की विशेषता को रीसेट करता है।

एक आसान तरीका है अपने ओवरराइड करने के लिए styleकी z-indexएक साथ है !importantCSS नियम पहले से ही में उल्लेख किया है के रूप में एक और उत्तर । फिर भी एक और जवाब सेटिंग position: relative;और z-indexइनपुट तत्व पर ही सुझाया जाता है जो स्वचालित रूप से Datepicker विजेट पर कॉपी किया जाएगा।

लेकिन, जैसा कि अनुरोध किया गया है, अगर किसी भी कारण से आपको वास्तव में इसे गतिशील रूप से सेट करने की आवश्यकता है, तो आपके पृष्ठ पर अधिक अनावश्यक कोड और प्रसंस्करण जोड़कर, आप इसे आज़मा सकते हैं:

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

बेला

मैंने z-indexविजेट को सेट करने के लिए एक आस्थगित फ़ंक्शन ऑब्जेक्ट बनाया , इसे jQuery UI द्वारा रीसेट होने के बाद, हर बार जब आप इसे कॉल करते हैं। यह आपकी जरूरतों को पूरा करना चाहिए।

CSS हैक बहुत कम बदसूरत IMO है, मैं अपने CSS में केवल jQuery UI tweaks के लिए एक स्थान आरक्षित करता हूं (जो कि मेरे पृष्ठों में IE6 tweaks के ठीक ऊपर है)।

Comments

क्या मैं आपको बताऊं कि आप कितना रॉक करते हैं !? पहले अन्य चीजों के असंख्य की कोशिश की। धन्यवाद!

— Bretticus

आपके उत्तर के लिए धन्यवाद, यह काम करता है, हालाँकि जैसे ही तारीख़ को ताज़ा किया जाता है (जैसे कि आप महीने बदलते हैं) z- इंडेक्स डिफ़ॉल्ट रूप से वापस सेट हो जाता है, इसलिए मुझे लगता है कि इस उत्तर के लिए एक छोटे समायोजन की आवश्यकता होगी, जो कि निम्नलिखित को जोड़ना होगा onChangeMonthYear: function () {setTimeout (फंक्शन () {$ ('। ui-dateicker)'। css ('z-index', 999999999999);}; 0); }

— गोमबो

@Gombo मेरा मानना ​​है कि यदि आप सीएसएस दृष्टिकोणों (जेएस एक के ऊपर वर्णित) का उपयोग करते हैं तो यह आसान है क्योंकि वे बहुत कम हैकिश हैं। ;)

— फेब्रीको मट्टे

कम से कम एफएफ में, अधिकतम संख्या 10 अंकों की लंबी होती है, इसलिए नौ 9 अधिक बेहतर-एर हो सकते हैं (हालांकि एफएफ एक त्रुटि के बिना 2147483647 में बदलने के लिए खुश है)।

— कैम्पबेलन

+1 z-indexइनपुट DOM पर सेट करने के लिए इंगित करने के लिए । मेरे लिए बस यही काम था:<input .... style="z-index: 9999;"/>

— सेबस्टियन

Answer 2

इसे करने का एक और अधिक सुंदर तरीका है। इस सीएसएस जोड़ें:

.date_field {position: relative; z-index:100;}

jQuery कैलेंडर का z-index101 (संबंधित तत्व से एक अधिक) सेट करेगा । positionक्षेत्र में होना चाहिए absolute, relativeया fixed। jQuery पहले तत्व के माता-पिता को खोजता है, जो निरपेक्ष / रिश्तेदार / नियत है, और उसका 'z-index

Comments

यह निश्चित रूप से सबसे अच्छा समाधान है। +1

— पॉल चेम्बरलेन

एक जादू की तरह काम किया! धन्यवाद

— ब्रैंडो

बिल्कुल सही लेकिन मेरे मामले में: .datepicker-dropdown {z-index: 999999?

— Important

लगभग सही है, लेकिन यह काम नहीं करता है अगर आपको जिंदेक्स का अधिकतम मूल्य नहीं पता है जिसके लिए आप चाहते हैं कि डेटकिपर खुद को थोपे।

— एमएफएएल

Answer 3

आपको सीएसएस का उपयोग करके !importantइन-लाइन z-indexमान को मजबूर करने के लिए क्लॉज का उपयोग करने की आवश्यकता है ।

.ui-datepicker{z-index: 99 !important};

Comments

क्षमा करें, मेरे लिए काम नहीं करता है - z- इंडेक्स को jQuery द्वारा तत्व पर सेट किया गया है जो महत्वपूर्ण से अधिक प्राथमिकता लेता है

— डायलन हैमिल्टन-फोस्टर

@ डायलन हैमिल्टन-फोस्टर क्या आप निश्चित हैं? क्या आप यह देखने के लिए कि शैली वास्तव में लागू है, क्या आप कुछ अन्य टैग अर्थात बैकग्राउंड कलरर जोड़ सकते हैं?

— इमानुएल ग्रीको

Answer 4

यह मेरे लिए तब काम आया जब मैं बूटस्ट्रैप मोडल के साथ डेटापिकर का उपयोग करने की कोशिश कर रहा था:

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

बेशक, अपनी जरूरत के हिसाब से चयनकर्ता बदलें। मैंने "z-index" को 1051 पर सेट किया क्योंकि बूटस्ट्रैप मोडल के लिए z-index 1050 पर सेट किया गया था।

Answer 5

डेटपिकर अब पॉपअप z- इंडेक्स को उसके संबंधित क्षेत्र से एक से अधिक पर सेट करता है, उसे उस फ़ील्ड के सामने रखने के लिए, भले ही वह फ़ील्ड पॉपअप डायलॉग में ही क्यों न हो। डिफ़ॉल्ट रूप से z-index 0 है, इसलिए datepicker 1 के साथ समाप्त होता है। क्या कोई ऐसा मामला है जहां यह सही ढंग से datepicker नहीं दिखा रहा है? JQuery फोरम पोस्ट

100 का z- इंडेक्स प्राप्त करने के लिए। आपको एक इनपुट की आवश्यकता है z-index:99;और JQueryUI डेटपिकर को अपडेट कर देगाz-index:100

<input style="z-index:99;"> या <input class="high-z-index">सीएसएस .high-z-index { z-index: 99; }

आप z-index को भी इनहेरिट करने के लिए निर्दिष्ट कर सकते हैं जो आपके डायलॉग बॉक्स से इनहेरिट करना चाहिए और jQueryUI को ठीक से z- इंडेक्स का पता लगाने का कारण बनता है।

<input style="z-index:inherit;"> या <input class="inhert-z-index">सीएसएस .inherit-z-index { z-index: inherit; }

Answer 6

BEST NATURAL तरीका यह है कि दिनांक-पिकर तत्व को एक "प्लेटफ़ॉर्म" पर रखा जाए, जिसमें "सापेक्ष" स्थिति हो और आपके नियंत्रण से ऊपर दिखाई दे रहे तत्व की तुलना में उच्च "z-index" हो ...

Comments

सार्थक कोड जोड़ सकते हैं और अधिक का वर्णन करें अपनेBEST NATURAL way

— पीटर

Answer 7

मेरे मामले में कुछ भी काम नहीं किया। मुझे उस इनपुट प्रकार के लिए z-index जोड़ने की जरूरत है जिसमें डेटकपर है।

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">

Answer 8

यह बूटस्ट्रैप डेटाइमपिकर के लिए है

यदि आपके डेटप्रिकर में छिपा है क्योंकि स्क्रॉल आपके div उपयोग में दिखाई देता है:

overflow-x: visible !important;
overflow-y: visible !important;

पूरे डिव के सीएसएस में जिसमें आपकी तारीख और अन्य वस्तुएं शामिल हैं जैसे कि

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}