Skip to main content
T
TLC-IT
Inspiring
April 1, 2010
Answered

Controlling Z-order of (date input-boxes)?

  • April 1, 2010
  • 1 reply
  • 1025 views

I have several <cfinput> controls placed vertically (using an HTML table).  They are "date" fields with the nice drop-down calendar.

Trouble is ... when the calendar drops down, it drops down behind the calendar-control below it.  This obscures the month-name bar and almost prevents access to the previous/next month buttons.

I was therefore wondering:  is it easily and conveniently possible to control the z-order of the drop down calendar, so that it appears in front of everything?

(P.S.  As usual, "it works fine in FireFox, and breaks in IE."  No surprise there...)

    This topic has been closed for replies.
    Correct answer insuractive

    This work-around should fix the problem (though its annoying that we even need a work-around for this):

    <table cellpadding="6" cellspacing="0" border="0">
    <tr>
      <td><b>Date 1</b></td>
      <td>
      <div style="clear:both;position:relative;z-index:3;">
         <cfinput name="Date1" id="Date1" type="DateField" value="" mask="M/D/YYYY" validate="USDate" required="yes" message="Please enter Date 1.">
      </div>
      </td>
      </tr>
      <tr>
      <td><b>Date 2</b></td>
      <td>
      <div style="clear:both;position:relative;z-index:2;">
        <cfinput name="Date2" id="Date2" type="DateField" value="" mask="M/D/YYYY" validate="USDate" required="yes" message="Please enter Date 2." >
      </div>
      </td>
      </tr>
      <tr>
      <td><b>Date 3</b></td>
      <td>
      <div style="clear:both;position:relative;z-index:1;">
        <cfinput name="Date3" id="Date3" type="DateField" value="" mask="M/D/YYYY" validate="USDate" required="yes" message="Please enter Date 3." >
      </div>
      </td>
      </tr>

    </table>

    1 reply

    I
    insuractiveCorrect answer
    Inspiring
    April 2, 2010

    This work-around should fix the problem (though its annoying that we even need a work-around for this):

    <table cellpadding="6" cellspacing="0" border="0">
    <tr>
      <td><b>Date 1</b></td>
      <td>
      <div style="clear:both;position:relative;z-index:3;">
         <cfinput name="Date1" id="Date1" type="DateField" value="" mask="M/D/YYYY" validate="USDate" required="yes" message="Please enter Date 1.">
      </div>
      </td>
      </tr>
      <tr>
      <td><b>Date 2</b></td>
      <td>
      <div style="clear:both;position:relative;z-index:2;">
        <cfinput name="Date2" id="Date2" type="DateField" value="" mask="M/D/YYYY" validate="USDate" required="yes" message="Please enter Date 2." >
      </div>
      </td>
      </tr>
      <tr>
      <td><b>Date 3</b></td>
      <td>
      <div style="clear:both;position:relative;z-index:1;">
        <cfinput name="Date3" id="Date3" type="DateField" value="" mask="M/D/YYYY" validate="USDate" required="yes" message="Please enter Date 3." >
      </div>
      </td>
      </tr>

    </table>

    T
    TLC-ITAuthor
    Inspiring
    April 5, 2010

    Definitely so.

    Really, the most appropriate solution would be to stipulate that the z-order of the popup calendar-box should always be "in front of" whatever else is there.  This visual effect takes place because the z-order of the popup is behind the plane of the control itself.

    But, that's why sometimes you hack.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices