Problem z indeksem z selektora dat w jquery


106

Mam element div pokazu slajdów i pole wyboru daty powyżej tego elementu div.

Po kliknięciu pola wyboru daty panel wyboru daty jest wyświetlany za elementem div pokazu slajdów.

I umieściłem scenariusz jako:

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

Nie mogę więc zmienić indeksu Z w datepicker w CSS. Indeks z dla datepicker, który generuje skrypt to 1, a mój div pokazu slajdów (również wywołujący go przez googleajaxapi) z-index to 5. Więc myślę, że muszę zwiększyć indeks z selektora dat o więcej niż 5. Więc jest jakikolwiek sposób, aby to zwiększyć?

Ktoś może mi pomóc?


Odpowiedzi:


176

Umieść następujący styl w „wejściowego” elementu tekstowego: position: relative; z-index: 100000;.

Element div datepicker pobiera indeks z z danych wejściowych, ale działa to tylko wtedy, gdy pozycja jest względna.

W ten sposób nie musisz modyfikować żadnego javascript w interfejsie użytkownika jQuery.


8
Problem polega na tym, że wprowadzone dane będą wyświetlane nad innymi elementami, rzadko jest to pożądany efekt
Serj Sagan

1
Czy to ma zadziałać, gdy datepicker jest powiązany z przedziałem czasowym ?
rmoestl,

10
position : relativejest nie do przyjęcia i nie działa w mojej sytuacji. poniższe rozwiązanie działa dobrze.
Kiwy,

1
to nie działa w przeglądarce IE 11. Czy ta przeglądarka jest specyficzna?
Ashwini Maddala

3
To rozwiązanie, mimo że działa, nie ma zastosowania we wszystkich sytuacjach. Najlepiej jest nadpisać pojedynczą linią CSS '.ui-datepicker {z-index: 9999! Ważne;}'
Daniel Tung

154

po prostu w swoim css użyj ' .ui-datepicker{ z-index: 9999 !important;}' Tutaj 9999 można zamienić na dowolną wartość warstwy, którą chcesz, aby datapicker był dostępny. Żaden kod nie może być komentowany ani dodawany ' position:relative;' css do elementów wejściowych. Ponieważ zwiększenie indeksu z elementów wejściowych będzie miało wpływ na wszystkie przyciski typu wejściowego, co może nie być potrzebne w niektórych przypadkach.


Musiałem użyć datepickerzamiastui-datepicker
M Smith

JavaScript nadal używa nieciągłych indeksów Z, dowolnych kontekstów układania w stosy i ma problemy ze zgodnością z różnymi przeglądarkami w 2016 roku? ActionScript 3 FTW (dziesięć lat temu i nadal dzisiaj).
Triynko


14

Opierając się na odpowiedzi marksyzm, to zadziałało dla mnie:

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

1
Ale wpływa to tylko na dane wejściowe, a nie na nakładkę DatePicker?
marksyzm

2
Używam tego przykładu jqueryui.com/datepicker, który nie używa ikony dla datepicker. Dzięki takiemu rozwiązaniu nie miałem problemów z pozostałymi komponentami webowymi.
Lucas

5

Dodając do odpowiedzi Justina, jeśli martwisz się niechlujnymi znacznikami lub nie chcesz, aby ta wartość była zakodowana na stałe w CSS, możesz ustawić dane wejściowe przed ich wyświetleniem. Coś takiego:

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

Zauważ, że nie możesz pominąć "position": "relative"reguły, ponieważ wtyczka wygląda w stylu wbudowanym dla obu reguł lub arkusza stylów, ale nie dla obu .

Jest dialog("widget")to faktyczny wyskakujący selektor daty.


1
Ten problem należy rozwiązać w skryptach JqueryUI i ustawić tak, aby domyślnie zapobiegał nakładkom. W większości przypadków użycia dane wejściowe nie byłyby nakładane na funkcje kalendarza. Jeśli zachodzi potrzeba, aby dane wejściowe (lub inne elementy) nakładały się na kalendarz, należy zastosować takie rozwiązanie. To powiedziawszy, @marksyzm byłby najlepszym rozwiązaniem IMO, ponieważ zastosowałbyś go tylko w razie potrzeby.
FrankO,

5

Miałem ten problem, który rozwiązałem za pomocą kliknięcia:

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

To rozwiązanie działa idealnie na wyskakującym okienku dla mnie. Dzięki !
darkomen,

5

Mam okno dialogowe, które używa na nim DatePicker. Zawsze był ukryty. Kiedy dostosowałem indeks Z, pole w dolnej formie zawsze pojawiało się w oknie dialogowym.

Użyłem kombinacji rozwiązań, które widziałem, aby rozwiązać problem.

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

Przed pokazem gwarantuje, że datepicker zawsze jest na górze po wybraniu, ale onClose zapewnia, że ​​indeks Z pola zostanie zresetowany, aby nie nakładał się na żadne okna dialogowe otwierane później z innym datepicker.


To rozwiązanie jest świetne i rozwiązało mój problem. Ale edytuj go trochę w części „onClose”. Włożyłem $(this)zamiast $('.ui-datepicker'). Więc ustawi z-index:0się na "to wejście" zamiast na wszystkie wejścia z klasą ui-datepicker.
Asuka165


1

Mam stronę, na której datapicker znajdował się nad przyciskiem tabletu datatables.net. Przyciski datatables miały wyższy indeks z niż poszczególne przyciski dat w selektorze daty. Dzięki odpowiedzi Ronye udało mi się rozwiązać ten problem, używając pozycji: względna; i z-index: 10000. Dzięki!


1

Zdarzyło mi się to, gdy brakowało mi tematu. Upewnij się, że motyw istnieje, lub może ponownie załaduj motyw i prześlij go ponownie na serwer.


1

To rozwiązało mój problem:

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

1

W rzeczywistości możesz skutecznie dodawać swoje css, .ui-datepicker{ z-index: 9999 !important;}ale możesz modyfikować jquery-ui.csslub jquery-ui.min.cssi dodawać na końcu klasy ui-datepicker z-index: 9999 !important;. obie rzeczy działają dla mnie (potrzebujesz tylko jednej ;-))


0

Miałem również ten problem, ponieważ datepicker używa indeksu z wejścia, dodałem następujący css

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

Po prostu weź regułę, która ma zastosowanie do twojej, albo przez identyfikator rodzica, klasę lub w moim przypadku okno dialogowe ładowania początkowego, używając ich grupy wejściowej i kontrolki formularza.


0

musiałem

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.