Question

I managed to get the YUI calendar widget working fine. But When it displays it doesn’t “float” over the page, that is, it pushes content around out shape. I need it to float above the page and not affect other elements.

There doesn’t seem to be a property to force the calendar to float over the page.

Does anyone know how to ensure that the widget floats above the page when displayed. The button that displays the widget is inside a table. HTML below

<tr>
<td>Expiry Date</td>
<td><input name="ExpiryDate" value="" id="ExpiryDate">
         <img id="calico" src="resources/images/calendar_icon.gif" />
          <div id="calWidget"></div>
</td>
</tr>

Answer 1

Managed to find a solution. When all else fails.. just add more HTML and style.

First wrap the “calWidget” with another div (we’ll give an id of “calPanel”). It will look like this.

<tr>
<td>Expiry Date</td>
<td><input name="ExpiryDate" value="" id="ExpiryDate">
         <img id="calico" src="resources/images/calendar_icon.gif" />
          <div id="calPanel">
             <div id="calWidget"></div>
          </div>
</td>
</tr>

Then with some simple CSS the “relative” calPanel wraps around the “absolute” positioned calWidget. You can fool around with the positioning of the calendar from there using left/right/top/bottom in the “#calWidget” CSS..

#calPanel {
    position:relative;
}

#calWidget { 
    display:block; 
    position:absolute; 
    left:0px;
    z-index:99;
}

Positioning seems to be consistent in IE7/8 and FF3+… Hope this helps if you have the same prob…