CF8 AJAX Features: CFInput Type="DateField" & CFDiv & Internet Explorer = Glitch
Posted At : November 5, 2007 6:39 PM | Posted By : Scott Bennett
Related Categories: AJAX,ColdFusion

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 (20) | 15477 Views
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment]
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
Neal's Gravatar Is this useful?

http://www.houseoffusion.com/groups/cf-talk/thread...
# Posted By Neal | 8/19/08 11:36 PM
Gary's Gravatar I found this when trying to get around the overlap problem. It works.

<cfform>
<table width="250" border="1" align="center">
<cfloop from="1" to = "5" index="i">
<tr><td>
<cfsavecontent variable="caldiv">
   <cfinput type="datefield" name="date#i#">
</cfsavecontent>
<cfset caldiv = replace(caldiv,"display:none; position:absolute; font-size:12px;overflow:visible;float:left;z-index:9050;top:1.5em;","display:none; font-size:12px;overflow:visible;z-index:9050;top:0px;","all")>   
      
<cfoutput>#caldiv#</cfoutput>
</td></tr>
</cfloop>
</table>
</cfform>
# Posted By Gary | 9/30/08 1:24 PM
Scott Bennett's Gravatar @Gary,

That's pretty clever! I never would have thought of using cfsavecontent like that.

Thanks,
Scott
# Posted By Scott Bennett | 9/30/08 1:51 PM
Tim Vanderlois's Gravatar Not that the following solution will work in every form situation, but this tested out in FF, Safari, IE7 & IE 6

<cfform ... >
<table>
<tr>
<td style="z-index:2; position:relative;">
<cfinput type="datefield" value="#detail.event_start_dt#" readonly="yes" size="10" mask="yyyy-mm-dd" name="start_dt"">
</td>
</tr>
<tr>
<td style="z-index:1; position:relative;">
<cfinput type="datefield" value="#detail.event_end_dt#" readonly="yes" size="10" mask="yyyy-mm-dd" name="end_dt"">
</td>
</tr>
</table>
</cfform>

Notably the cfform tag cannot be inside the table tag...
# Posted By Tim Vanderlois | 10/20/08 6:25 PM
Joey Vincent's Gravatar Awesome, thanks Tim. This simple solution worked for me.
# Posted By Joey Vincent | 10/24/08 8:32 PM
Superfly_fr's Gravatar As a complement to Tim's answer, notice that you can do the same without table,
using a simple <DIV style="z-index:2; position:relative;"> to encapsulate each cfinput.
Just chack the Z-order (the first=the biggest).
# Posted By Superfly_fr | 2/17/09 10:59 AM
Chad's Gravatar I see this issue when you are nesting tables.

Make sure your <cfform> tag is outside the table or the datefield will not popup the calendar.

Bad:
<table>
<cfform>
<tr>
...

Good:
<cfform>
<table>
<tr>
...
# Posted By Chad | 3/6/13 3:28 PM
WiWildcat's Gravatar Chad - thank you! The inside-of-tables with cfform was my problem. Cleared it up right away.
# Posted By WiWildcat | 2/22/14 5:59 PM
[Add Comment]
Get Expert ColdFusion Help

If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
Archives By Subject
AJAX (24) [RSS]
BlogCFC (2) [RSS]
CFEclipse (4) [RSS]
ColdFusion (50) [RSS]
CSS (1) [RSS]
FireFox (1) [RSS]
Frameworks (1) [RSS]
Google API (1) [RSS]
JavaScript (25) [RSS]
Lucee (1) [RSS]
My Life (6) [RSS]
OCCFUG (2) [RSS]
PayPal (1) [RSS]
Regular Expressions (1) [RSS]
XML (4) [RSS]
Search

Subscribe
Enter your email address to subscribe to this blog.

RSS