Reset CSS with cfinput type = "datefield"

Question

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

This is only a problem with IE, as Firefox and Safari work fine.

Is there a simple CSS hack or some other simple thing that I can do to make the calendar act as it should? Re-arranging the form does not help much.

Answer 1

Well, you have to encapsulate your wirhin date field in the div from both positions: relative and Z-value of the index, 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 a Z-index inside Cfinput will not work.

Answer 2

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

Answer 3

My first slant is trying to add style for text fields with a negative z index. Alternatively, you can try applying a positive z-index to the popup.

The first one will probably be easier, given that pop-ups are recorded dynamically - CF passes any unrecognized or unused attributes through the browser, so you can simply add a style. Sort of:

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

Not tested, YYMV.

Answer 4

Try this in your CSS,

for div with cfinput fields

 position:relative;z-index:0 

for calendar

 position:absolute;z-index:1