Обтекание CSS с помощью cfinput type="datefield"
У меня есть форма с использованием нескольких <cfinput type="datefield" ...>
, Они расположены таким образом, что всплывающий календарь CSS должен появляться над полем для других. Однако текстовые поля для других дат заканчиваются перед календарем.
Это только проблема IE, так как Firefox и Safari работают отлично.
Есть ли простой CSS-хак или какая-то другая простая вещь, которую я могу сделать, чтобы календарь работал так, как должен? Перестановка формы не очень полезна.
4 ответа
Ну, вы должны инкапсулировать ваше поле даты в div с обеими позициями: относительным и значением Z-индекса, как в:
<div style="position:relative; z-index:3">
<cfinput type="dateField" name="info_dateDebutPub" value="#dateformat(info_dateDebutPub,'dd/mm/yy')#" mask="dd/mm/yy">
</div>
Определение Z-индекса в Cfinput не будет работать.
IE6 имеет проблемы с z-index и некоторыми видами элементов управления. Попробуйте это: http://brandonaaron.net/jquery/plugins/bgiframe/docs/
Мое первое желание - попытаться добавить стиль для текстовых полей с отрицательным z-индексом. С другой стороны, вы можете попытаться применить положительный z-индекс к всплывающему окну.
Первое, вероятно, будет проще, учитывая способ динамического написания всплывающих окон - CF передает любые нераспознанные или неиспользованные атрибуты через браузер, так что вы можете просто добавить стиль. Что-то вроде:
<cfinput type="datefiled" name="bob" value="" style="z-index: -1;">
Не проверено, YYMV.
Попробуйте это в своем CSS,
для DIV с полями cfinput
position:relative;z-index:0
для календаря
position:absolute;z-index:1