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?
jquery
jquery-plugins
uidatepicker
rubinowy
źródło
źródło
Odpowiedzi:
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.
źródło
position : relative
jest nie do przyjęcia i nie działa w mojej sytuacji. poniższe rozwiązanie działa dobrze.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.źródło
datepicker
zamiastui-datepicker
pracował dla mnie
źródło
Opierając się na odpowiedzi marksyzm, to zadziałało dla mnie:
źródło
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:
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.źródło
Miałem ten problem, który rozwiązałem za pomocą kliknięcia:
źródło
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.
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.
źródło
$(this)
zamiast$('.ui-datepicker')
. Więc ustawiz-index:0
się na "to wejście" zamiast na wszystkie wejścia z klasą ui-datepicker.Zobacz tutaj: http://forum.jquery.com/topic/z-index-1-datepicker-1-8
źródło
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!
źródło
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.
źródło
To rozwiązało mój problem:
źródło
W rzeczywistości możesz skutecznie dodawać swoje css,
.ui-datepicker{ z-index: 9999 !important;}
ale możesz modyfikowaćjquery-ui.css
lubjquery-ui.min.css
i dodawać na końcu klasy ui-datepickerz-index: 9999 !important;
. obie rzeczy działają dla mnie (potrzebujesz tylko jednej ;-))źródło
Miałem również ten problem, ponieważ datepicker używa indeksu z wejścia, dodałem następujący css
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.
źródło
musiałem
źródło