Link to home
Start Free TrialLog in
Avatar of PhotoMan2000
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.
<!-- 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>

Open in new window

Avatar of SidFishes
SidFishes
Flag of Canada image

what version are you having issues with? the following works fine for me in both FF3 and IE7, OPera 9 and Safari 3.1
 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>

Avatar of PhotoMan2000
PhotoMan2000

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...
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">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
      <td colspan="2">t&amp;c's here</td>
    </tr>
  </table>
</cfform>
</cfoutput>
</body>
</html>

Open in new window

try adding the type="html" attribute to your cfform tag before we go any further
Didn't work.  cfform is now like this:
<cfform action="addAgentReg.cfm"  method="post" name="AmexReg" id="AmexReg" preservedata="no" format="html">
well i'm still not seeing the problem... (or not understanding it ?)


new-1.jpg
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
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...
Nope.. here's my current select.

      <cfselect name="CruiseLineBooked">
        <cfloop query="getCruiseLines">
          <option value="#getCruiseLines.cruiseline#">#getCruiseLines.cruiseline#</option>
        </cfloop>
      </cfselect>

Open in new window

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


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.NullPointerException.

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
Avatar of lbhc
lbhc

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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)
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.
OK.. Creating a new question  -- will post it here, then award the points on this one..