CSS Error - ASP.NET Calendar Selection

Question

EDIT
With one of the following answers, I was able to fix this problem for rendering in a table. I still see this problem in my ListViews. I tried this CSS for ListView, but it did not fix the problem.

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

---

IN PERSONAL PHONE
alt text http://www.imageunload.com/public/15867/CSSIssue2.png?no_history 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

Another solution is to override these styles with another named style. A new style should appear after the style for the table above in the .css file itself. (the priority order for css is where it appears in the .css file ...) Having a specific style for this control will prevent other styles from doing the same in the future.

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

 .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 'td'. Added! Important for everything (may not be needed)

I hope the Site.css file will be updated by default in future releases.

Answer 2

EDIT 2

I would say that 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 define the style that will be applied to all <td> under the table with the name of the list listview, detailstable and gridview. The problem is that they will also be inherited under tables

You can try by creating a second set of these styles, but changing them from

 table.listview td 

to

 table.listview td table td 

and disable any styles that have been applied. which will override styles in nested tables created using a calendar expander

EDIT

Well, it's hard to say without seeing the entire StyleSheet for the DynamicDataSite table, but see if there is CSS for this table using

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

Or using specific .classnames or #Ids

If this is the first, you will need to do some CSS gymnastics to redefine styles for nested tables in order to override the styles applied to the main table. eg.

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

ORIGINAL

Try placing CalendarExtender outside the table that contains the target element. In appearance, the <td> in the collector inherits the parent CSS table.

Answer 3

You can get an idea of ​​how to solve your problem by looking at the message: CSS and redefinition of styles on nested elements .

Answer 4

The fix for this problem is in the DD Preview project here and is called AjaxToolkitFixes.css and is located in the root of the site.

Just copy the root directory of your site and add the link to the Site.Master file.