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) | 15043 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
layout.
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.
Any suggestions for a workaround until they fix this??
thnx!
"Error processeing Javascript element nameDiv: "
I have a cfpod then my cfdiv inside that.
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">
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?
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>
http://www.w3schools.com/Css/pr_pos_z-index.asp
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.
http://www.coldfusionguy.com/ColdFusion/blog/index...
http://www.houseoffusion.com/groups/cf-talk/thread...
<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>
That's pretty clever! I never would have thought of using cfsavecontent like that.
Thanks,
Scott
<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...
using a simple <DIV style="z-index:2; position:relative;"> to encapsulate each cfinput.
Just chack the Z-order (the first=the biggest).
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>
...