A while back I blogged about a div layer positioning glitch that occurs in IE when you position a cfinput datefield above a cflayout or cfdiv generated div layer. This problem seems to be cause by the fact that in IE, a relative positioned element influences the stacking order of it's child-elements, which violates the CSS specification, but who really needs standards anyways right?
Well, I figured out a way to workaround it, and it's really stupid that I didn't think of it before. I kept trying (unsuccessfully) to write a JavaScript function that would find the layers and reposition them after the page loaded, when finally a light bulb went on in my head, and I came up with a much simpler solution.
I simply used div layers so that the date field (which gets displayed at the top of the page) gets loaded by the browser after the cflayout stuff (which appears at the bottom of the page). Now as far as IE is concerned the calendar div layer now is at the top of the stack because it came last in the HTML source. Then I use CSS to position the sections of content where I want them to appear on the page.
First here is the code that generates the bug (click here in IE to see the bug I am talking about):
<cfform>
<cfinput name="StartDate" value="#StartDate#" type="DateField" onkeypress="loadDate(event);">
</cfform>
<br><br>
<cflayout type="tab" name="MyLayout">
<cflayoutarea name="Tab1" title="My First Tab" style="height:100%">
<br><br>
<table width="95%" align="center"><tr><td>
<cfdiv id="MyFirstDivLayer">
Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
</cfdiv>
</td></tr></table>
</cflayoutarea>
<cflayoutarea name="Tab2" title="My Second Tab" style="height:100%">
<br><br>
<table width="95%" align="center"><tr><td>
<cfdiv id="MySecondDivLayer">
Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
</cfdiv>
</td></tr></table>
</cflayoutarea>
<cflayoutarea name="Tab3" title="My Third Tab" style="height:100%">
<br><br>
<table width="95%" align="center"><tr><td>
<cfdiv id="MyThirdDivLayer">
Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
</cfdiv>
</td></tr></table>
</cflayoutarea>
</cflayout>
Now here is the code with the workaround to solve the layer positioning issue (Click here in IE to see it with my workaround in place):
<html>
<head>
<title>DateField and CFDiv Bug Workaround</title>
<style>
.topDiv{position:absolute;
top: 10px;}
.bottomDiv{position:absolute;
top: 30px;}
</style>
</head>
<body>
<div class="bottomDiv">
<cflayout type="tab" name="MyLayout">
<cflayoutarea name="Tab1" title="My First Tab" style="height:100%">
<br><br>
<table width="95%" align="center"><tr><td>
<cfdiv id="MyFirstDivLayer" style="z-index: -1000;">
Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
</cfdiv>
</td></tr></table>
</cflayoutarea>
<cflayoutarea name="Tab2" title="My Second Tab" style="height:100%">
<br><br>
<table width="95%" align="center"><tr><td>
<cfdiv id="MySecondDivLayer" style="z-index: -1000;">
Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
</cfdiv>
</td></tr></table>
</cflayoutarea>
<cflayoutarea name="Tab3" title="My Third Tab" style="height:100%">
<br><br>
<table width="95%" align="center"><tr><td>
<cfdiv id="MyThirdDivLayer" style="z-index: -1000;">
Here is a bunch of content that is in my div layer Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer<br>Here is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layerHere is a bunch of content that is in my div layer
</cfdiv>
</td></tr></table>
</cflayoutarea>
</cflayout>
</div>
<div class="topDiv">
<cfparam name="StartDate" default="#dateformat(now(),'mm/dd/yyyy')#">
<cfform>
<cfinput name="StartDate" value="#StartDate#" type="DateField" onkeypress="loadDate(event);">
</cfform>
</div>
</body>
</html>
I'm not sure if that solution will work for everyone, but it worked in my application and my IE users are happy now.
Comments (8) | 7986 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
btw - can you update your blog software to allow plus signs in email addresses (which is valid) - I'd like to enter something like myemailhandle+blogentry@gmail.com
The problem is that this bug is really with IE more than with CF. The CF code is generating the calendar div layer with a z-index of over 9000 which, according to the World Wide Web Consortium CSS guidelines, should cause it to appear above any of the other div layers on the page (provided there are less then 9000 other layers on the page). Most likely Adobe engineers will have to take a similar approach as the one I used and have the calendar div layer always get generated at the bottom of the HTML source code and generate CSS to position it so that it appears to the right of it's related input field. I am not sure how easy that would be for Adobe to implement, or how big a priority it is, but I do know they are aware of the issue and that it is on the list of things that will get fixed someday.
<div style="clear:both;position:relative;z-index:2;">
<cfinput type="datefield" name="cal"/>
</div>
I am having a problem with the CF datepicker in FF V 3.5.1.
http://www.neale.ca/test.cfm
The datepicker will popup in IE but nothing happens when you click the date icon in FF?
Any ideas?