I was developing a report application where I put a cfinput type="DateField" at the top of the page with a series of tabs below it using cflayoutarea, and cfdiv tags in each of the tab areas that are bound to the datefield. Each tab contains a different report related to the sales that occurred on the date that is selected at the top. All the div tags are bound to the datefield, so if you select a new date, the sales reports all refresh asynchronously. It's a pretty straight forward implementation of these new features in ColdFusion 8.

The only thing is that in Internet Explorer if open the calendar on a datefield that is right above a cfdiv layer, the calendar goes under the cfdiv and the links don't work on the portion of calendar that is behind the div layer.

Try this link in FireFox and it works fine, but in IE you will see the problem:

http://www.coldfusionguy.com/ColdFusion/Samples/DateFieldandCFDivGlitch.cfm

I have submitted the bug (#70618) to Adobe, so hopefully that gets a hot fix relatively soon.

Currently the suggested workaround is to either put a bunch of <br> tags in between, to make sure there is enough space for the calendar above the cfdiv, or put your calendar on the side or some other position that is not above the cfdiv layer.

Comments
Eddie's Gravatar Any update on this yet? I am currently experiencing the same issue on our intranet site. thnx!
# Posted By Eddie | 1/4/08 11:53 AM
tom's Gravatar This is also a problem if you have multiple datefields stacked in a vertical
layout.
# Posted By tom | 1/5/08 11:06 AM
Eddie's Gravatar That is what I am seeing. I have a birthday and a hiredate field on top of each other and I can't use the calendar for the top field. Any help would be great. Thnx! Eddie
# Posted By Eddie | 1/7/08 9:28 AM
Scott Bennett's Gravatar I check with Adobe on bug 70618 and the response is that it's slated for the next updater for CF8. It has been assigned to a developer but there is not specific date for when this will be available.

For now we will need to keep working around the problem by using <br> tags or placing the datefields in different positions on the page so calendar does not go under other div layers.
# Posted By Scott Bennett | 1/7/08 4:45 PM
Eddie's Gravatar I just updated to 8.1 and the error still exists. Looks like they did not get it in this release. It is very annoying b/c I still find myself using a custom calendar control for vertical stacked fields.

Any suggestions for a workaround until they fix this??

thnx!
# Posted By Eddie | 4/10/08 12:21 PM
tom's Gravatar I'm having an issue using a cfinput-datefield inside a cfdiv. I get a Javascript error;;;;


"Error processeing Javascript element nameDiv: "

I have a cfpod then my cfdiv inside that.
# Posted By tom | 6/2/08 12:18 PM
Scott Bennett's Gravatar did you use a cfajaximport tag to import the cfinput/datefield javascript?

http://livedocs.adobe.com/coldfusion/8/htmldocs/he...

If not try putting this tag at the top of the template that this throwing that error:

<cfajaximport tags="cfinput-datefield">
# Posted By Scott Bennett | 6/2/08 1:41 PM
tom's Gravatar Scott:

Thanks for the reply...I already have the cfajaximport tag in place.

This is bizarre to me...IE shows the error then loads template, but the calendar does nothing.

In firefox the page wont even load?
# Posted By tom | 6/2/08 3:11 PM
tom's Gravatar OK here it is...

This caused my grief:
<a href="##" onclick="javaScript:ColdFusion.navigate('programData.cfm?add','dataDiv')">Add New</a>

This was my solution....
<a href="<cfoutput>#AjaxLink('programData.cfm?add')#</cfoutput>">Edit</a>
# Posted By tom | 6/2/08 5:01 PM
Scott's Gravatar Just modify the z-index of your date fields so that they are rendered in such an order that they cascade over each other correctly.

http://www.w3schools.com/Css/pr_pos_z-index.asp
# Posted By Scott | 6/17/08 5:06 PM
Scott Bennett's Gravatar @Scott,

The problem with that solution is that ColdFusion is automatically generating the div layer that handles the calendar and setting the z-index in the style attribute of that automatically generated div tag.
The only way I can think of to override that is to write some JavaScript that executes after the page loads and uses the DOM to somehow dynamically figure which div layer is the one ColdFusion generated to contain the calendar and modify it's z-index value.
I think I might play with that idea a little later... I'll post if I can get it to work.
# Posted By Scott Bennett | 6/24/08 2:30 PM
Scott Bennett's Gravatar I created a JavaScript function to modify the z-index of the calander div layer like I was talking about in my last comment, but it didn't help. I ended up using a different workaround for the problem. You can read about it here:

http://www.coldfusionguy.com/ColdFusion/blog/index...
# Posted By Scott Bennett | 6/25/08 9:19 PM
 
Home | Blog | Portfolio | Contact | © 2001 - 2007 The ColdFusion Guy - Scott Bennett. All rights reserved.
BlogCFC was created by Raymond Camden. This blog is running version 5.9.