Question

I’m using an ajax calendar extender control on my page, and although the extender block appears correctly, it’s contents don’t:

Here’s the code I’m using to write it onto the page:

<table class="tblForm">
    <tr>
        <td valign="top">
            <asp:TextBox runat="server" ID="txtPickupDate" AutoPostBack="true"></asp:TextBox>
            <aj:CalendarExtender runat="server" ID="calPickup" TargetControlID="txtPickupDate" Format="yyyy-MM-dd">
            </aj:CalendarExtender>
        </td>
    </tr>
</table>

There aren’t any style rules applied directly to the CalendarExtender, but I do have this css which may be relevant:

.tblForm
{
    display: block;
}
.tblForm td
{
    width: 245px;
    float: left;
}

Has anyone seen this before? Does anyone know what it could be?

Thanks in advance for any help!

EDIT
I’ve tried removing the float and although this fixes the CalendarExtender, it also shifts every cell in the container table out of alignment. I’ve also tried setting clear: both; to the CalendarExtender, but this makes it’s background disappear.

Answer 1

Okay I’ve figured it out 🙂

The problem came in with that CSS for the table cells. Modifying the width of the cells also modified the width of the cells within the table that is written in by the Calender Extender.

To get around this, I removed all floats on the table and it’s child elements and declared a new class to set the width which I then omitted from the cell containing the calendar:

.tblForm 
{
    display: block;
}
.tblForm tr.wider td, tblForm .wider
{
    width: 245px;
}