У меня есть div для слайд-шоу, и у меня есть поле datepicker над этим div.
Когда я нажимаю на поле выбора даты, панель выбора даты отображается за div слайд-шоу.
И я поместил сценарий как:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js
Поэтому я не могу изменить z-индекс datepicker в CSS. Z-индекс datepicker, который генерирует скрипт, равен 1, а z-index моего слайд-шоу (также вызывающего через googleajaxapi) равен 5. Итак, я думаю, мне нужно увеличить z-index средства выбора даты больше, чем 5. Так что, есть любой способ увеличить его?
Кто-нибудь может мне помочь?
jquery
jquery-plugins
uidatepicker
рубист
источник
источник
Ответы:
Поместите следующий стиль в текстовом элементе «ввода»:
position: relative; z-index: 100000;
.Div datepicker принимает z-index из входных данных, но это работает только в том случае, если позиция является относительной.
Используя этот способ, вам не нужно изменять какой-либо javascript из jQuery UI.
источник
position : relative
неприемлемо и не работает в моей ситуации. нижеприведенное решение работает нормально.просто в вашем css use '
.ui-datepicker{ z-index: 9999 !important;}
' Здесь 9999 можно заменить на любое значение слоя, которое вы хотите, чтобы ваш datepicker был доступен. Ни код, ни добавлениеposition:relative;
CSS к элементам ввода нельзя . Поскольку увеличение z-индекса элементов ввода повлияет на все кнопки типа ввода, что в некоторых случаях может не понадобиться.источник
datepicker
а неui-datepicker
работал на меня
источник
Основываясь на ответе marksyzm, это сработало для меня:
источник
Добавляя к ответу Джастина, если вы беспокоитесь о неопрятной разметке или не хотите, чтобы это значение было жестко закодировано в CSS, вы можете установить ввод до его отображения. Что-то вроде этого:
Обратите внимание, что вы не можете пропустить
"position": "relative"
правило, поскольку плагин либо смотрит во встроенном стиле для обоих правил, либо для таблицы стилей, но не для обоих .dialog("widget")
Является фактическим DatePicker , что всплывает.источник
У меня была эта проблема, которую я решил с помощью щелчка:
источник
У меня есть диалоговое окно, в котором используется датапикер. Это всегда было скрыто. Когда я настраивал z-index, поле в нижней форме всегда появлялось в диалоговом окне.
Я использовал комбинацию решений, которые видел, чтобы решить проблему.
Перед показом гарантирует, что datepicker всегда будет наверху, когда выбран, но onClose гарантирует, что z-index поля будет сброшен, чтобы он не перекрывался ни с какими диалогами, открытыми позже с другим datepicker.
источник
$(this)
вместо$('.ui-datepicker')
. Таким образом, он будет установленz-index:0
на «этот вход» вместо всех входов с классом ui-datepicker.Смотрите здесь: http://forum.jquery.com/topic/z-index-1-datepicker-1-8
источник
У меня есть страница, на которой указатель даты находился над кнопкой datatables.net tabletools. Кнопки таблиц данных имели более высокий z-индекс, чем отдельные кнопки даты выбора даты. Благодаря ответу Ронье я смог решить эту проблему, используя position: relative; и z-index: 10000. Спасибо!
источник
Это случилось со мной, когда мне не хватало темы. Убедитесь, что тема существует, или, возможно, перезагрузите тему и повторно загрузите ее на свой сервер.
источник
Вот что решило мою проблему:
источник
Фактически, вы можете эффективно добавить в свой CSS,
.ui-datepicker{ z-index: 9999 !important;}
но вы можете изменитьjquery-ui.css
илиjquery-ui.min.css
и добавить в конце класса ui-datepickerz-index: 9999 !important;
. у меня работают обе вещи (вам нужен только один ;-))источник
У меня тоже была эта проблема, так как datepicker использует входной z-index, я добавил следующий css
Просто возьмите правило, которое применяется к вашему, либо по родительскому идентификатору, классу или, в моем случае, диалогу начальной загрузки, используя их группу ввода и контроль формы.
источник
Мне пришлось
источник