Jquery তারিখ চয়নকারী জেড-সূচক ইস্যু

Question

আমার একটি স্লাইডশো ডিভ আছে এবং আমার সাথে ডিভের উপরে ডেটপিকারের ক্ষেত্র রয়েছে।

আমি যখন ডেটপিকার ক্ষেত্রে ক্লিক করি, স্লাইডশো ডিভের পিছনে ডেটপিকার প্যানেল শো show

এবং আমি স্ক্রিপ্টটি এইভাবে রেখেছি:

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

সুতরাং আমি সিএসএসে ডেটপিকারের জেড-সূচকটি পরিবর্তন করতে পারি না। ডেটপিকারের জেড-ইনডেক্সটি যা স্ক্রিপ্টটি তৈরি করে তা 1 এবং আমার স্লাইডশো ডিভ (এছাড়াও গুগলজ্যাক্সপি মাধ্যমে ফোন করা) জেড-সূচক 5 So তাই আমার ধারণা আমি ডেট পিকারের জেড-ইনডেক্স 5 এর চেয়ে বেশি বাড়াতে হবে তাই এখানে আছে এটি বাড়ানোর কোনও উপায়?

কেউ আমাকে সাহায্য করতে পারেন?

Comments

সমাধানটি এখানে স্ট্যাকওভারফ্লো.com

— বিকাশকারী

Answer 1

'INPUT' টেক্সট উপাদান নিম্নলিখিত শৈলী রাখুন:: position: relative; z-index: 100000;।

ডেটপিকার ডিভ ইনপুট থেকে জেড-ইনডেক্স নেয়, তবে অবস্থানটি আপেক্ষিক হলেই এটি কাজ করে।

এইভাবে ব্যবহার করে আপনাকে jQuery UI থেকে কোনও জাভাস্ক্রিপ্ট পরিবর্তন করতে হবে না।

Comments

এর সাথে সমস্যা হ'ল আপনার ইনপুটটি অন্যান্য উপাদানগুলির উপরে প্রদর্শিত হবে, এটি খুব কমই কাঙ্ক্ষিত প্রভাব

— সেরজ সাগান

যখন যে কাজ অনুমিত হয় datepicker একটি আবদ্ধ হয় বিঘত ?

— rmoestl

position : relativeগ্রহণযোগ্য নয় এবং আমার পরিস্থিতিতে কাজ করে না। সমাধান বেলো ভাল কাজ করে।

— কিউই

এটি IE 11 ব্রাউজারে কাজ করছে না। এই ব্রাউজারটি কি নির্দিষ্ট?

— অশ্বিনী মাদদালা 5'15

এই সমাধানটি, যদিও এটি কাজ করে, সমস্ত পরিস্থিতিতে বৈধ নয়। সেরা সিএসএসের একক লাইন '.ui-তারিখপিকার {জেড-সূচক: 9999 গুরুত্বপূর্ণ!}'

— ড্যানিয়েল তুং

Answer 2

কেবলমাত্র আপনার সিএসএস ব্যবহারের জন্য ' .ui-datepicker{ z-index: 9999 !important;}' এখানে আপনার 99৯ তারিখ চয়নকারী যে স্তর স্তরটি চান তা প্রতিস্থাপন করা যেতে পারে। position:relative;ইনপুট উপাদানগুলিতে কোনও কোডই মন্তব্য করা বা ' ' CSS যোগ করার মতো নয় । কারণ ইনপুট উপাদানগুলির জেড-ইনডেক্স বৃদ্ধির ফলে সমস্ত ইনপুট টাইপ বোতামগুলির উপর প্রভাব পড়বে, যা কিছু ক্ষেত্রে প্রয়োজন হবে না।

Comments

আমি ব্যবহার করতে হয়েছে datepickerবদলেui-datepicker

— এম স্মিথ

জাভাস্ক্রিপ্ট এখনও বিচ্ছিন্ন জেড-ইনডেক্স, স্বেচ্ছাসেবক স্ট্যাকিং প্রসঙ্গ ব্যবহার করে এবং 2016 সালে ক্রস-ব্রাউজারের সামঞ্জস্যতার সমস্যা রয়েছে? অ্যাকশনস্ক্রিপ্ট 3 এফটিডব্লিউ (এক দশক আগে, এবং এখনও)।

— ট্রায়ঙ্কো

Answer 3

আমার জন্য কাজ

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

Answer 4

মার্কসাইজম উত্তরের ভিত্তিতে, এটি আমার পক্ষে কাজ করেছে:

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

Comments

তবে এটি কেবল ইনপুটকেই প্রভাবিত করে এবং ডেটপিকারের ওভারলেটিকে নয়?

— marksyzm

আমি jqueryui.com/datepicker এই উদাহরণটি ব্যবহার করছি যা এটি ডেটপিকারের জন্য কোনও আইকন ব্যবহার করে না। এই সমাধানের সাথে আমার বাকী ওয়েব উপাদানগুলির সাথে সমস্যা ছিল না।

— লুকাস

Answer 5

জাস্টিনের উত্তরে যুক্ত করা, আপনি যদি অপ্রয়োজনীয় মার্কআপ সম্পর্কে উদ্বিগ্ন হন বা আপনি এই মানটি সিএসএসে হার্ড কোডড না চান তবে আপনি এটি প্রদর্শনের আগে ইনপুট সেট করতে পারেন। এটার মতো কিছু:

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

নোট করুন যে আপনি "position": "relative"নিয়মটি বাদ দিতে পারবেন না , যেহেতু প্লাগইন হয় উভয় বিধি বা স্টাইলশীটের জন্য ইনলাইন স্টাইলে দেখে তবে উভয়ই নয় ।

এটি dialog("widget")হ'ল আসল ডেটপিকারটি যা পপ আপ হয়।

Comments

এই সমস্যাটি JqueryUI স্ক্রিপ্টগুলিতে সমাধান করা উচিত এবং ডিফল্টরূপে ওভারলেগুলি রোধ করতে সেট করা উচিত। সর্বাধিক ব্যবহারের ক্ষেত্রে ক্যালেন্ডার ইনপুট ক্ষমতা ওভারলেল করে কোনও ইনপুট চায় না। যদি ক্যালেন্ডারে ওভারলে ইনপুট (বা অন্যান্য উপাদান) রাখার দরকার হয় তবে এর মতো একটি সমাধান ব্যবহার করা উচিত। এটি বলার পরে, @markyzm হ'ল সেরা সমাধান আইএমও হবে আপনি যখন প্রয়োজন কেবল তখনই এটি প্রয়োগ করবেন।

— ফ্র্যাঙ্কো

Answer 6

আমি ক্লিক করে এই সমস্যাটি সমাধান করেছি:

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

Comments

এই সমাধানটি আমার জন্য পপআপ উইন্ডোতে পুরোপুরি কাজ করে। ধন্যবাদ!

— অন্ধকার

Answer 7

আমার একটি ডায়লগ বাক্স রয়েছে যা এতে ডেটপিকার ব্যবহার করে। এটি সর্বদা লুকানো ছিল। আমি যখন জেড-সূচকটি সামঞ্জস্য করি তখন নীচের ফর্মের ক্ষেত্রটি সর্বদা ডায়ালগটিতে প্রদর্শিত হয়।

আমি সমস্যার সমাধানের জন্য একটি সমাধানের সংমিশ্রণ ব্যবহার করেছি।

$('.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  } ); }                    
            });

পূর্ববর্তী শোটি নিশ্চিত করে যে নির্বাচিত হওয়ার পরে ডেটপিকারটি সর্বদা শীর্ষে থাকে, তবে অনক্লোজ নিশ্চিত করে যে ক্ষেত্রের জেড-সূচকটি পুনরায় সেট হয়ে যায় যাতে এটি কোনও আলাদা ডেটপিকারের সাথে পরে খোলা কোনও ডায়ালগগুলিতে ওভারল্যাপ না করে।

Comments

এই সমাধানটি দুর্দান্ত এবং আমার সমস্যার সমাধান। তবে এটি "অনক্লোজ" অংশে কিছুটা সম্পাদনা করুন। আমি এর $(this)বদলে রাখি $('.ui-datepicker')। সুতরাং, এটি z-index:0ইউআই-ডেটপিকার শ্রেণীর সাথে সমস্ত ইনপুটগুলির পরিবর্তে "এই ইনপুট" এ সেট হবে ।

— Asuka165

Answer 8

এখানে দেখুন: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

Answer 9

আমার একটি পৃষ্ঠা রয়েছে যেখানে ডেটাপিকারটি একটি ডেটাবেটস.টেল টেবিললটুল বোতামের শীর্ষে ছিল। ডেটাবেবল বোতামগুলির পৃথক ডেটপিকারের তারিখ বোতামগুলির তুলনায় উচ্চতর জেড-সূচক ছিল। রনির উত্তরের জন্য ধন্যবাদ আমি অবস্থান: আপেক্ষিক ব্যবহার করে এই সমস্যাটি সমাধান করতে সক্ষম হয়েছি; এবং z- সূচক: 10000. ধন্যবাদ!

Answer 10

থিমটি অনুপস্থিত অবস্থায় আমার সাথে এটি ঘটেছিল। থিমটি বিদ্যমান রয়েছে তা নিশ্চিত করুন বা সম্ভবত থিমটি পুনরায় ডাউনলোড করুন এবং এটি আপনার সার্ভারে পুনরায় আপলোড করুন।

Answer 11

এটিই আমার সমস্যার সমাধান করেছে:

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

Answer 12

বস্তুত আপনি কার্যকরভাবে আপনার CSS এ যুক্ত করতে পারেন .ui-datepicker{ z-index: 9999 !important;}কিন্তু আপনি পরিবর্তন করতে পারেন jquery-ui.cssবা jquery-ui.min.cssএবং UI-datepicker ক্লাস শেষে যোগ 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;
}