Обтекание CSS с помощью cfinput type = "datefield"

Question

У меня есть форма, использующая несколько <cfinput type="datefield" ...>. Они расположены таким образом, что всплывающий календарь CSS должен появляться над полем для других. Однако текстовые поля для других дат заканчиваются перед календарем.

Это только проблема IE, так как Firefox и Safari работают отлично.

Есть ли простой CSS-хак или какая-то другая простая вещь, которую я могу сделать, чтобы заставить календарь работать как надо? Переорганизация формы не очень полезна.

Answer 1

Что ж, вы должны инкапсулировать ваше поле даты в 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 не будет работать.

Answer 2

IE6 имеет проблемы с z-index и некоторыми видами элементов управления. Попробуйте это: http://brandonaaron.net/jquery/plugins/bgiframe/docs/

Answer 3

Попробуйте это в своем CSS,

для DIV с полями cfinput

position:relative;z-index:0

для календаря

position:absolute;z-index:1

Answer 4

Мое первое желание - попытаться добавить стиль для текстовых полей с отрицательным z-индексом. Кроме того, вы можете попытаться применить положительный z-индекс к всплывающему окну.

Первое, вероятно, будет проще, учитывая способ динамического написания всплывающих окон - CF передает любые нераспознанные или неиспользованные атрибуты в браузер, поэтому вы можете просто добавить стиль. Что-то вроде:

<cfinput type="datefiled" name="bob" value="" style="z-index: -1;">

Не тестировалось, ГГМВ.