Прохождение CSS через cfinput type = "datefield"
У меня есть форма, в которой используется несколько <cfinput type = "datefield" ...>. Они расположены таким образом, что всплывающий календарь CSS должен отображаться над полем для остальных. Однако текстовые поля для других дат оказываются перед календарем.
Это проблема только IE, так как Firefox и Safari работают нормально.
Есть ли простой CSS-хак или другая простая вещь, которую я могу сделать, чтобы календарь работал так, как должен? Переупорядочивание формы не очень помогает.
Нет. Я почти исключительно занимаюсь приложениями для интрасети.
вы про простые поля ввода текста или выбираете? Поскольку элемент select имеет особое поведение в IE.
Ответы 4
Мое первое желание - попытаться добавить стиль для текстовых полей с отрицательным z-индексом. В качестве альтернативы вы можете попытаться применить к всплывающему окну положительный z-индекс.
Первое, вероятно, было бы проще, учитывая способ динамического написания всплывающих окон - CF передает в браузер любые нераспознанные или неиспользуемые атрибуты, поэтому вы можете просто добавить стиль. Что-то типа:
<cfinput type = "datefiled" name = "bob" value = "" style = "z-index: -1;">
Не тестировалось, ГГМВ.
Z-index имеет смысл только для позиционированных элементов, сам по себе он не имеет никакого эффекта.
@Tomalak, я был почти уверен, что если не текстовые поля, то всплывающие окна были размещены. @ Аль Эверетт, извините, это не сработало. Я должен был сказать, что у всплывающих окон должен быть положительный z-индекс. Не знаю, пробовали ли вы это.
Сгенерированные элементы наверняка имеют положительный z-индекс. Фактически, более 9000.
IE6 имеет проблемы с z-index и некоторыми видами элементов управления. Попробуйте это: http://brandonaaron.net/jquery/plugins/bgiframe/docs/
Это приложение для интрасети, и все пользователи используют IE7.
Насколько мне известно, проблема все еще существует в IE7.
Что ж, вам нужно инкапсулировать свое поле даты в div с обоими значениями position: relative и Z-index, как в:
<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 не сработает.
Попробуйте это в своем CSS,
для DIV с полями cfinput
position:relative;z-index:0
для календаря
position:absolute;z-index:1
у вас есть тестовая страница? это немного сложно отладить без образца.