Обтекание 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
Другие вопросы по тегам