Calendar Extender not displaying correctly

Question

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

Screenshot of CalendarExtender

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.

score 5 · Accepted Answer · answered Sep 07 '12 at 13:20

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;
}

@MayankPathak This is resolved, thanks :) your query makes me wonder if the answer is clear enough... — Ortund, Sep 13 '12 at 07:26

score 3 · Answer 2 · answered Oct 31 '12 at 16:18

I had similar issues with a calendar extender inside of a ListView object. It was always cutting off Friday and Saturday due to styling issues. I ended up getting around it by wrapping my calendar extenders (including the textbox and image), and assigning them a style that overrides my table's css.

#calendarContainerOverride table
{
    width:0px;
    height:0px;
}

#calendarContainerOverride table tr td
{
    padding:0;
    margin:0;
}

Then applying the id here:

<tr id="calendarContainerOverride">
  <td style="padding-top:10px">    
    <asp:TextBox ID="txtStart" runat="server" %>' />
    <asp:CalendarExtender ID="extender" runat="server" Enabled="True" TargetControlID="txtStart" PopupButtonID="imgCalendarStart" />
    <asp:Image ID="imgCalendarStart" ImageUrl="~/Images/Calendar.png" runat="server"/>
  </td>
</td>

With this method you don't have to change the styling for all of your tables, and just focus in on the pesky calendar.

Calendar Extender not displaying correctly

2 Answers2