PhotoMan2000
asked on
Datefield popup calander hiding behind other datefields
I searched the site and I *KNOW* there's an solution for this. I have 2 cfinput datefields stacked on top of each other in a form. (yes, using a table if that matters - yes bad coding, I know)
When I click the calendar icon, the upper calendar hides behind the input box for the lower datefield.
I know this is an IE BUG, there *MUST* be some hack to it. I tried accessing the div container and have viewed the parsed out code -- unfortunately CF didn't assign an ID to the container div for the text box in question (Adobe bug??) and it has in-line CSS with very high z-index. Which thwarts my attempts of adding my own CSS - as inline take precedence.
When I click the calendar icon, the upper calendar hides behind the input box for the lower datefield.
I know this is an IE BUG, there *MUST* be some hack to it. I tried accessing the div container and have viewed the parsed out code -- unfortunately CF didn't assign an ID to the container div for the text box in question (Adobe bug??) and it has in-line CSS with very high z-index. Which thwarts my attempts of adding my own CSS - as inline take precedence.
<!-- code snippet -->
<tr>
<td><label><div align="right">Sailing Date</div></label></td>
<td><cfinput type="datefield" name="SailingDate" value="#now()#" /></td>
</tr>
<tr>
<td><div align="right">Booking Number</div></td>
<td><cfinput name="BookingNumber" type="text" value="testbook123" ></td>
</tr>
ASKER
Running CF 8, IE 7 - since the CSS is inline - that would override any thing else.
without seeing the whole code segment, I can't help more as what I've posted works...
ASKER
here's the entire page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script language="javascript" src="../../../../scripts/prototype.js"></script>
<script language="JavaScript">
function check(field)
{
if ( field.checked == true)
{
document.AmexReg.submitBtn.disabled = false;
}
else
{
document.AmexReg.submitBtn.disabled = true;
}
}
</script>
<style type="text/css">
#AmexRegTable{border:1px solid red; margin:20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px;width:525px;}
#AmexRegTable td {padding:2px 4px 2px 2px;}
#input {border:1px solid #006600;}
#SellingAgentCLIANumber {background-color:#ccc; color:#666666}
</style>
<body>
<cfquery datasource="2008CruiseManual" name="getCruiseLines">
SELECT * FROM "CruiseLines" ORDER BY CruiseLine ASC
</cfquery>
<cfoutput>
<cfform action="addAgentReg.cfm" method="post" name="AmexReg" id="AmexReg" preservedata="no">
<table id="AmexRegTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">headline info here</td>
</tr>
<tr>
<td width="211"><div align="right">Cruise Line</div></td>
<td width="312">
<select name="CruiseLineBooked">
<cfloop query="getCruiseLines">
<option value="#getCruiseLines.cruiseline#">#getCruiseLines.cruiseline#</option>
</cfloop>
</select></td>
</tr>
<tr>
<td><label>
<div align="right">Booking Date</div>
</label></td>
<td><cfinput type="datefield" name="BookingDate" value="#now()#" /></td>
</tr>
<tr>
<td><label><div align="right">Sailing Date</div></label></td>
<td><cfinput type="datefield" name="SailingDate" value="#now()#" /></td>
</tr>
<tr>
<td><div align="right">Booking Number</div></td>
<td><cfinput name="BookingNumber" type="text" value="testbook123" ></td>
</tr>
<tr>
<td><div align="right">Number of Passengers</div></td>
<td><cfinput value="12" type="text" name="Guests" validate="integer" validateat="onblur" message="Please enter the ## of Passengers Sailing"></td>
</tr>
<tr>
<td><div align="right">Total Booking Cost</div></td>
<td><cfinput value="2400" type="text" name="TotalCost" validate="integer" validateat="onblur" message="Please enter the total Booking Cost. Booking must be greater than $2,400"></td>
</tr>
<tr>
<td><div align="right">Selling Agent's Name</div></td>
<td><cfinput value="joel" type="text" name="SellingAgentName"></td>
</tr>
<tr>
<td><div align="right">Selling Agent's CLIA ##</div></td>
<td><cfinput type="text" name="SellingAgentCLIANumber" value="#session.userID#" readonly="yes"></td>
</tr>
<tr>
<td><div align="right">Selling Agent's Email Address</div></td>
<td><cfinput value="me@foo,com" type="text" name="SellingAgentEmail" validateat="onblur" validate="email" message="Please verify if you entered a valid email address."></td>
</tr>
<tr>
<td><div align="right">Selling Agent's Street Address</div></td>
<td><cfinput type="text" value="123 street" name="SellingAgentStreet"></td>
</tr>
<tr>
<td><div align="right">Selling Agent's City</div></td>
<td><cfinput type="text" value="some city" name="SellingAgentCity"></td>
</tr>
<tr>
<td><div align="right">Selling Agent's State/Proivence</div></td>
<td><cfinput type="text" value="WA" name="SellingAgentState" ></td>
</tr>
<tr>
<td><div align="right">Selling Agent's Zip / Postal Code</div></td>
<td><cfinput type="text" value="00025" name="SellingAgentZip" maxlength="6"></td>
</tr>
<tr>
<td><div align="right">AMEX Card Used for Sale</div></td>
<td><cfinput type="checkbox" name="UsedAmexCard" onClick="check(document.AmexReg.UsedAmexCard)" />
I confirm that I or my customer has used an American Express credit card for this booking.</td>
</tr>
<tr>
<td><div align="right">Submit Registration</div></td>
<td><cfinput type="submit" value="submit" name="submitBtn" disabled="disabled" /></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2">t&c's here</td>
</tr>
</table>
</cfform>
</cfoutput>
</body>
</html>
try adding the type="html" attribute to your cfform tag before we go any further
ASKER
Didn't work. cfform is now like this:
<cfform action="addAgentReg.cfm" method="post" name="AmexReg" id="AmexReg" preservedata="no" format="html">
<cfform action="addAgentReg.cfm" method="post" name="AmexReg" id="AmexReg" preservedata="no" format="html">
ASKER
Wrong box, click on the first one. - see my screen shot. Notice how the 2nd text box (datefield) is above the calendar
CropperCapture-18-.Png
CropperCapture-18-.Png
in my code I stripped out the select box as i didn't have the datasource and both worked as expected..
now i just noticed you are using a regular select box in a cfform...which is probably the issue. change it to a cfselect and i -think- all should work...
now i just noticed you are using a regular select box in a cfform...which is probably the issue. change it to a cfselect and i -think- all should work...
ASKER
Nope.. here's my current select.
<cfselect name="CruiseLineBooked">
<cfloop query="getCruiseLines">
<option value="#getCruiseLines.cruiseline#">#getCruiseLines.cruiseline#</option>
</cfloop>
</cfselect>
ASKER
Additional thought.. the CFSELECT doesn't have anything to do with the cfinput boxes...
errr...sorry I was looking at it in FF (duh)
Scott has as fix here...I don't have time to look at the fix atm to help integrate with your code but should get you started
http://www.coldfusionguy.com/ColdFusion/blog/index.cfm/2008/6/25/Workaround-for-CFInput-DateField--CFDiv--Internet-Explorer-Glitch
he also has logged it as a bug with adobe and hopefully it will be fixed shortly
Scott has as fix here...I don't have time to look at the fix atm to help integrate with your code but should get you started
http://www.coldfusionguy.com/ColdFusion/blog/index.cfm/2008/6/25/Workaround-for-CFInput-DateField--CFDiv--Internet-Explorer-Glitch
he also has logged it as a bug with adobe and hopefully it will be fixed shortly
ASKER
OK - I'll check that out.. I also have another issue with that same page if you can help.
The submit button is coded to be active by the check box. IF I submit a blank page i get this error:
The cause of this output exception was that: java.lang.NullPointerExcep tion.
I've change the subit button from the above to be:
<cfinput type="submit" value="submit" name="submitBtn" disabled="disabled" validateat="onsubmit" />
and have tried the validationat to be onsubmit and onblur
But it doesn't validate. (Granted no one in their right mind would think of submitting blank page, but I should alert them befor they try!)
Ideas?
The submit button is coded to be active by the check box. IF I submit a blank page i get this error:
The cause of this output exception was that: java.lang.NullPointerExcep
I've change the subit button from the above to be:
<cfinput type="submit" value="submit" name="submitBtn" disabled="disabled" validateat="onsubmit" />
and have tried the validationat to be onsubmit and onblur
But it doesn't validate. (Granted no one in their right mind would think of submitting blank page, but I should alert them befor they try!)
Ideas?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
THAT WORKED!!!
If you can assist with the submit problem -my posting just before your answer -- I'll double the points, (If I can - I'm new a using this service)
If you can assist with the submit problem -my posting just before your answer -- I'll double the points, (If I can - I'm new a using this service)
max points is 500 and for a substantially different q than what was initially asked you should open a new one as this one is answered
Yes, SidFishes is correct. Please open a new question for the other issue and award the points for this one.
I'm very happy that worked for you.
I'm very happy that worked for you.
ASKER
OK.. Creating a new question -- will post it here, then award the points on this one..
ASKER
here's the new question -- I'm desperate! :)
https://www.experts-exchange.com/questions/23700573/Submitting-a-blak-form-or-incomplete-form-throws-an-error-and-vaidate-on-submit-not-working.html
Thanks
https://www.experts-exchange.com/questions/23700573/Submitting-a-blak-form-or-incomplete-form-throws-an-error-and-vaidate-on-submit-not-working.html
Thanks
perhaps there's something else outside the snippet you posted that's causing the issue???
<cfform format="html" action="##" method="post">
<table>
<tr>
<td><label><div align="right">Sailing Date</div></label></td>
<td><cfinput type="datefield" name="SailingDate" value="#now()#" /></td>
</tr>
<tr>
<td><div align="right">Booking Number</div></td>
<td><cfinput name="BookingNumber" type="text" value="testbook123" ></td>
</tr></table></cfform>