CSS bleed-through with cfinput type="datefield"

Question

I have a form using multiple <cfinput type="datefield" ...>. They are positioned in such a way that the pop-up CSS calendar should appear over the field for others. However, the text fields for the other dates end up in front of the calendar.

This is only an IE issue as Firefox and Safari work just fine.

Is there a simple CSS hack or some other simple thing I can do to get the calendar to act as it should? Re-arranging the form is not very helpful.

do you have a test page? this is a bit hard to debug without a sample. — scunliffe, Nov 04 '08 at 19:44
are you talking about simple input text fields or select? Because the select element has a special behaviour in IE. — alexmeia, Aug 25 '09 at 13:28

score 4 · Answer 1 · answered Feb 17 '09 at 13:51

Well, you have to encapsulate your datefield wirhin a div with both position:relative and Z-index value, as in :

<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>

Defining Z-index within the Cfinput will not work.

score 1 · Answer 2 · answered Oct 23 '08 at 17:37

1

IE6 has issues with z-index and some kinds of controls. Try this: http://brandonaaron.net/jquery/plugins/bgiframe/docs/

answered Oct 23 '08 at 17:37

Light

144
1
5

This is for an intranet application and all users are on IE7. – ale Oct 24 '08 at 14:32
As far as I know the problem still exists in IE7. – Light Oct 27 '08 at 16:59

score 0 · Answer 3 · answered Sep 01 '09 at 11:42

0

Try this in your CSS,

for DIV with cfinput fields

position:relative;z-index:0

for Calendar

position:absolute;z-index:1

answered Sep 01 '09 at 11:42

kayteen

777
1
8
22

Ben Doom · Answer 4 · 2008-10-23T14:25:04.800

0

My first inclination is to attempt to add a style for the text fields with a negative z-index. Alternately, you could attempt to apply a positive z-index to the popup.

The first would probably be easier, given the way that the popups are written dynamically -- CF passes any unrecognized or unused attributes through to the browser, so you could just add a style. Something like:

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

Not tested, YYMV.

edited Oct 23 '08 at 14:25

answered Oct 16 '08 at 18:24

Ben Doom

7,865
1
27
30

3

Z-index is only meaningful on positioned elements, on it's own it has no effect. – Tomalak Oct 20 '08 at 08:06
@Tomalak, I was fairly certain that the popups, if not the text fields, were positioned. @Al Everett, sorry it did not work. I should have said that the popups should have a positive z-index. I don't know if you tried that. – Ben Doom Oct 23 '08 at 14:24
The elements generated most certainly do have a positive z-index. Over 9000, in fact. – ale Oct 24 '08 at 14:33

CSS bleed-through with cfinput type="datefield"

4 Answers4

Linked