CSS Issue - ASP.NET Calendar picker

Question

EDIT
With one of the below answers, I was able to correct this issue for the rendering within a table. I'm still seeing this issue within my ListViews. I've tried this CSS for the ListView, but it has not corrected the issue.

/* FIX FOR CALENDAR IN TABLE */
.DateTime_Edit
{
    white-space: nowrap;
}
.DateTime_Edit table
{
    border: solid 0 #FFFFFF;
    width: 0;
    height: 0;
    padding: 0;
    margin: 0;
}
.DateTime_Edit table tr td
{
    border: solid 0 #FFFFFF;
    padding: 0;
    margin: 0;
}
/* LISTVIEW, NOT WORKING */    
.DateTime_Edit table.listview
    {
        border: solid 0 #FFFFFF;
        width: 0;
        height: 0;
        padding: 0;
        margin: 0;  
    }
    .DateTime table.listview tr td
    {
        border: solid 0 #FFFFFF;
        padding: 0;
        margin: 0;  
    }

---

WITHIN A LISTVIEW
alt text http://www.imageunload.com/public/15867/CSSIssue2.png?no_history WITHIN A TABLE
alt text http://www.imageunload.com/public/15852/CSSIssue.jpg?no_history

---

Field Template Definition:

<%@ Control Language="C#" CodeBehind="DateAjaxCalendar_Edit.ascx.cs" Inherits="WarehouseLogging.DateAjaxCalendar_EditField" %>
<div class="DateTime_Edit">
<asp:TextBox ID="TextBox1" runat="server" Text='<%# FieldValueEditString %>' CssClass="droplist"></asp:TextBox>
<asp:Image runat="Server" CssClass="CalendarIcon" ID="imgCalendar1" ImageUrl="~/Images/calendar.gif" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1"
    TargetControlID="TextBox1" CssClass="custcal1">
</ajaxToolkit:CalendarExtender>
<ajaxToolkit:FilteredTextBoxExtender ID="fltrTextBox1" runat="server" TargetControlID="TextBox1"
    FilterType="Custom, Numbers" ValidChars="/">
</ajaxToolkit:FilteredTextBoxExtender>
<asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" CssClass="droplist"
    ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" />
<asp:DynamicValidator runat="server" ID="DynamicValidator1" CssClass="droplist" ControlToValidate="TextBox1"
    Display="Dynamic" />
</div>

Answer 1

You may get a clue on how to solve your problem by looking at this post: CSS & Overriding Styles on Nested Elements.

Answer 2

EDIT 2

I'd say these guys are the culprits

body.template table.listview th, table.gridview th, table.detailstable th, body.template table.listview td, table.gridview td, table.detailstable td
{
}

body.template table.listview td, table.gridview td, table.detailstable td
{
}

They specifiy a style to be applied to all <td>'s below a table with the class names listview, detailstable & gridview. The problem is they'll be inherited by sub tables as well

You could try, creating a second set of those styles but change them from

table.listview td

to

table.listview td table td

and unset any styles that have been applied. that'll override the styles in the nested tables created by the Calendar Extender

EDIT

Ok, It's hard to tell without seeing the entire StyleSheet for the DynamicDataSite Table, but have a look to see if the CSS For that table is specified using

Table
{
   //...
}
TD
{
   //...
}

Or using specific .classnames or #Ids

If its the former, you'll need to do some CSS Gymnastics to override the styles for nested tables to undo the styles applied to the main table. e.g.

//Top Level Tables
table td
{
    color: Red;
}

//Nested Tables
table td table td
{
    color: Blue
}

ORIGINAL

Try putting the CalendarExtender outside of the table that contains it's target control. By the looks of it, the <td>'s in the picker are inheriting the parent table CSS.

Answer 3

The fix for this issue is in the on DD Preview project here and is called AjaxToolkitFixes.css and is in the root of the website.

Just copy to the root of your site and add a reference in your Site.Master file.

Answer 4

Another solution is to override those styles with another named style. The new style would need to appear after the style for the table noted above, within the .css file itself. (order of precedence for css is where it appears in the .css file...) Having a specific style for that control would prevent other styles from doing the same thing in the future.

I wrote this style, placed it at the end of the Site.css file and wrapped my entire "DateTime_Edit" FieldTemplate Contorl in it:

.DateTime_Edit
{
    white-space: nowrap !important;
}
.DateTime_Edit table
{
    border: solid 0 #FFFFFF !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.DateTime_Edit table tr td
{
    border: solid 0 #FFFFFF !important;
    background-color: #FFFFFF !important;
    padding: 0 !important;
    margin: 0 !important;
}

Edit: Added background-color to the 'td'. Added !important to everything (may not be needed)

Hopefully the default Site.css file will be updated in subsequent releases.