web-dev-qa-db-ja.com

jquery-ui datepicker change z-index

問題は単純明快ですが、それを解決する方法を見つけるのに苦労しています。

私は、カスタムメイドの「iosスタイルのオン/オフ切り替え」とともにjQuery-ui日付ピッカーを使用しています。このトグルは、現在、日付ピッカーの上に表示されているいくつかの絶対配置された要素を使用します。

下の7月6日をカバーするcircleい円を参照してください...

enter image description here

これを行うための汚い方法（少なくともimo）は、スタイルシートの1つにスタイルを記述することですが、ピッカーが起動するときにJavaScriptを使用してこれを完了させたいと思います。

私はすでに試しました

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

そして

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

しかし、datepickerが起動されるたびにz-indexが上書きされるようです。

どんな助けも大歓迎です！

javascriptjquerycssjquery-uidatepicker
77
Greg Guida

JQueryはdatepickerウィジェットのstyle属性を呼び出すたびにリセットするため、質問のJSコードは機能しません。

styleのz-indexを簡単にオーバーライドする方法は、 別の回答 で既に述べた!important CSSルールを使用することです。さらに別の answer は、入力要素自体に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);
    }
});

Fiddle

jQuery UIによってリセットされると、ウィジェットを呼び出すたびに、ウィジェットのz-indexを設定する遅延関数オブジェクトを作成しました。それで十分です。

CSSハックはIMOほどfarくありません。CSSにはjQuery UIの調整（ページのIE6の調整のすぐ上）専用のスペースを確保しています。

133
Fabrício Matté

よりエレガントな方法があります。このCSSを追加します。

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

jQueryはカレンダーのz-indexを101（対応する要素よりも1つ多い）に設定します。 positionフィールドは、absolute、relative、またはfixedでなければなりません。 jQueryは最初の要素の親（絶対/相対/固定）を検索し、そのz-indexを取ります

83
Marek Roj

CSSを使用してインライン!important値を強制するには、z-index句を使用する必要があります。

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

bootstrapモーダルと組み合わせてdatepickerを使用しようとしたときに、これは私にとってはうまくいきました：

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

もちろん、自分のニーズに合わせてセレクタを変更してください。 bootstrapモーダルのz-indexが1050に設定されているため、「z-index」を1051に設定しました。

4
David Hicks

日付ピッカーは、ポップアップz-indexをその関連フィールドよりも1つ多く設定して、そのフィールド自体がポップアップダイアログ内にある場合でも、そのフィールドの前に保持します。デフォルトでは、z-indexは0なので、datepickerは1になります。datepickerが正しく表示されない場合はありますか？ JQueryフォーラム投稿

Z-indexを100にするには、z-index:99;の入力が必要です。JQueryUIはdatepickerをz-index:100に更新します

<input style="z-index:99;">または<input class="high-z-index">およびcss .high-z-index { z-index: 99; }

また、ダイアログボックスから継承するz-indexを指定して、jQueryUIにz-indexを適切に検出させることもできます。

<input style="z-index:inherit;">または<input class="inhert-z-index">およびcss .inherit-z-index { z-index: inherit; }

3
Loren

私の場合、何も機能しませんでした。日付ピッカーを持つ入力タイプにz-indexを追加する必要がありました。

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

これはBootstrap datetimepicker用

Divにスクロールが表示されて日付ピッカーが隠れている場合は、次を使用します。

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

あなたのdatepickerと他のアイテムを含むdiv全体のCSSで

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

最も自然な方法は、「相対的な」位置を持ち、コントロールの上に表示される要素よりも高い「z-index」を持つ「プラットフォーム」に日付ピッカー要素を単に配置することです...

0
clinton