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.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

Try this in your CSS,

for DIV with cfinput fields

position:relative;z-index:0

for Calendar

position:absolute;z-index:1