Problem jest dość prosty, chociaż nie wiem, jak go rozwiązać.
Używam datepicker jQuery-ui wraz z niestandardowym "przełącznikiem włączania / wyłączania stylu ios". Ten przełącznik używa niektórych absolutnie pozycjonowanych elementów, które obecnie pojawiają się na górze mojego selektora dat.
zobacz brzydki krąg obejmujący 6 lipca poniżej ...
brudnym sposobem na zrobienie tego (przynajmniej imo) jest napisanie stylu w jednym z moich arkuszy stylów, ale wolałbym raczej użyć javascript po uruchomieniu selektora, aby to zrobić.
Już próbowałem
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});
i
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});
ale wygląda na to, że indeks Z jest nadpisywany za każdym razem, gdy uruchamiany jest datepicker.
każda pomoc jest mile widziana!
javascript
jquery
css
jquery-ui
datepicker
Greg Guida
źródło
źródło
style
tagu do głowy - nie tylko posiadanie go w CSS sprawia, że kod JS jest krótszy i bardziej przejrzysty, ale także bezproblemowo stosuje się do wszystkich instancji datepickerów.style
Tag w głowie jest trochę bliżej do tego, co im szuka, ale to, co naprawdę chcesz zrobić, to zmienić atrybut stylu na elemencie data-picker.=]
Odpowiedzi:
Twój kod JS w pytaniu nie działa, ponieważ jQuery resetuje
style
atrybut widgetu Datepicker za każdym razem, gdy go wywołasz.Łatwym sposobem przesłonić jego
style
„sz-index
jest z!important
reguły CSS, jak już wspomniano w innej odpowiedzi . Jeszcze inna odpowiedź sugeruje ustawienieposition: relative;
iz-index
sam element wejściowy, który zostanie automatycznie skopiowany do widżetu Datepicker.Ale zgodnie z żądaniem, jeśli z jakiegokolwiek powodu naprawdę potrzebujesz ustawić go dynamicznie, dodając więcej niepotrzebnego kodu i przetwarzania do swojej strony, możesz spróbować tego:
$('.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); } });
Skrzypce
Utworzyłem obiekt funkcji odroczonej, aby ustawić
z-index
widżet, po tym, jak zostanie zresetowany przez interfejs użytkownika jQuery, za każdym razem, gdy go wywołasz. Powinno wystarczyć na Twoje potrzeby.Hack CSS jest znacznie mniej brzydki IMO, rezerwuję miejsce w moim CSS tylko na poprawki interfejsu jQuery (to tuż nad poprawkami IE6 na moich stronach).
źródło
;)
z-index
wejście DOM. To była jedyna rzecz, która działała dla mnie:<input .... style="z-index: 9999;"/>
Jest na to bardziej elegancki sposób. Dodaj ten CSS:
.date_field {position: relative; z-index:100;}
jQuery ustawi kalendarz na
z-index
101 (o jeden więcej niż odpowiedni element).position
Pole musi byćabsolute
,relative
albofixed
. jQuery wyszukuje element nadrzędny pierwszego elementu, który jest bezwzględny / względny / stały i przyjmuje jego 'z-index
źródło
Musisz użyć
!important
klauzuli, aby wymusić wartość w liniiz-index
za pomocą CSS..ui-datepicker{z-index: 99 !important};
źródło
To zadziałało, gdy próbowałem użyć DatePicker w połączeniu z modalem bootstrap:
$('input[id^="txtDate"]').datepicker(); $('input[id^="txtDate"]').on('focus', function (e) { e.preventDefault(); $(this).datepicker('show'); $(this).datepicker('widget').css('z-index', 1051); });
Oczywiście zmień selektor, aby dopasować go do własnych potrzeb. Ustawiłem „indeks z” na 1051, ponieważ indeks z dla modalu ładowania początkowego został ustawiony na 1050.
źródło
Aby uzyskać indeks Z równy 100. Potrzebujesz danych wejściowych za pomocą,
z-index:99;
a JQueryUI zaktualizuje datepicker doz-index:100
<input style="z-index:99;">
lub<input class="high-z-index">
i css.high-z-index { z-index: 99; }
Możesz również określić indeks z do dziedziczenia, który powinien dziedziczyć z okna dialogowego i spowodować, że jQueryUI poprawnie wykryje indeks z.
<input style="z-index:inherit;">
lub<input class="inhert-z-index">
i css.inherit-z-index { z-index: inherit; }
źródło
NAJLEPSZY NATURALNY sposób to po prostu umieszczenie elementu selektora dat na „platformie”, która ma „względną” pozycję i ma wyższy „indeks z” niż element, który jest widoczny nad Twoją kontrolą ...
źródło
BEST NATURAL way
W moim przypadku nic nie działało. Musiałem dodać indeks Z do typu danych wejściowych, który ma DatePicker.
<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
źródło
Dotyczy to selektora danych Bootstrap
Jeśli datapicker jest ukryty, ponieważ w Twoim div pojawia się scroll, użyj:
overflow-x: visible !important; overflow-y: visible !important;
w css całego div, które zawierają twój datepicker i inne elementy, takie jak
.dialogModel{ overflow-x: visible !important; overflow-y: visible !important; }
źródło