locked
Prevent CalendarExtender from Adopting Table CSS RRS feed

  • Question

  • User-183024123 posted

    Ok, my eyes are bleeding and I spent 4 hours last night narrowing down my problem to the stupid table CSS in which the calendarextender/textbox resides in.

    I'm using a CalendarExtender inside a GridView ItemTemplate along with a textbox.  Both of thse are withii an Ajax UpdatePanel but I don't think that is causing any problem at all.

    Long story short, the GridView is based on CSS and the rowstyle/altrow style have the following spacing.  With the spacing in place the Ajax CalendarExtender is hosed ...days missing, partial months, etc.  As soon as Ii set the padding to 0 in the grid CSS the calendar displays perfectly.

    I have already copied/created a ajax__calender.css file with the default calendar css rules but that didn't help.  How do I override the table td tr, etc. rules of the gridview within the ajax calendar CSS so the gridview table crap isn't picked up by the calendar control?  I don't want to have to alter the gridview CSS and make all my gridviews look like crap for the sake of making a calendar display correctly.

    http://i392.photobucket.com/albums/pp9/tophog01/Misc/gridview.png

     Help?

     .yuigrid .rowstyle td, .altrowstyle td

    {

    padding: 4px 10px 4px 10px; border-right: solid 1px #cbcbcb;

    }

    If I set the above rule for the gridview to the below everything is fine.  Aggravating!

    padding: 0px; border-right: solid 1px #cbcbcb;

    Thursday, March 5, 2009 10:24 AM

All replies

  • User-183024123 posted

    Hmmm, apparently I'm the only person who has experienced this problem?

    Saturday, March 7, 2009 9:01 AM
  • User1747761241 posted

    Yep, your the only one.  And I'm the only one who cares about the toolkit so we can work together on this.  cssClass is a property on the calendar extender.  Expand the themeing panel on the sample have fun.  You can control everything how the calendar displays with CSS.

    http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx

    Examples...

    ajax__calendar_day : An element that displays the day of the month. Child Css classes: none

    lifted this out of the source for calendar extender.

    this._daysBody = $common.createElementFromTemplate({ nodeName: "tbody", properties : { id : id + "_daysBody" } }, this._daysTable);
            for (var i = 0; i < 6; i++) {
                var daysRow = $common.createElementFromTemplate({ nodeName : "tr" }, this._daysBody);
                for(var j = 0; j < 7; j++) {
                    var dayCell = $common.createElementFromTemplate({ nodeName : "td" }, daysRow);
                    var dayDiv = $common.createElementFromTemplate({
                        nodeName : "div",
                        properties : {
                            mode : "day",
                            id : id + "_day_" + i + "_" + j,
                            innerHTML : "&nbsp;"
                        },
                        events : this._cell$delegates,
                        cssClasses : [ "ajax__calendar_day" ]
                    }, dayCell);

    Saturday, March 7, 2009 11:38 AM
  • User-183024123 posted

    Actually my comment about me being the only one was a joke :)  After hours of digging thru various posts that kind of describe the problem I didn't find a solution until this morning.  The work-around below seems to solve 90% of the display issues with the Ajax calendar control but not all of them.  Apparently I still have some gridview CSS still falling thru the cracks and being picked up by the Ajax calendar extender.  Seems like there should be a way to isolate the Ajax calendar control css from everything else.  Always seems like I'm hacking things to get things to work correctly.

     

    http://littletalk.wordpress.com/2008/05/22/ajax-calendar-doesnt-render-properly/

     

    Saturday, March 7, 2009 11:50 AM
  • User-1597315603 posted
    Hi<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
    <o:p> </o:p>
    For this issue, I would like to suggest you try the following solution, which works fine on our lab:<o:p></o:p>
    <o:p> </o:p>
    (code from : http://forums.asp.net/t/1199536.aspx)<o:p></o:p>
    <o:p>  
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
            body
            {
                margin: 0;
                padding: 0;
                background: #fff url(images/bg.gif) repeat-x;
                font: normal .7em Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
                line-height: 1.6em;
                color: #333;
            }
            .centertable
            {
                background-color: #D4D0C8;
                margin-left: auto;
                margin-right: auto;
            }
            .centertable th
            {
                background-color: #A5B5C5;
                padding: 5px;
            }
            .centertable td
            {
                background-color: White;
                padding: 5px;
            }
            .MyCalendar .ajax__calendar_container
            {
                border: 1px solid #646464;
                background-color: lemonchiffon;
                color: red;
            }
            .MyCalendar .ajax__calendar_container th
            {
                padding: 0px;
            }
            .MyCalendar .ajax__calendar_container td
            {
                background-color: lemonchiffon;
                padding: 0px;
            }
            .MyCalendar .ajax__calendar_other .ajax__calendar_day, .MyCalendar .ajax__calendar_other .ajax__calendar_year
            {
                color: black;
            }
            .MyCalendar .ajax__calendar_hover .ajax__calendar_day, .MyCalendar .ajax__calendar_hover .ajax__calendar_month, .MyCalendar .ajax__calendar_hover .ajax__calendar_year
            {
                color: black;
            }
            .MyCalendar .ajax__calendar_active .ajax__calendar_day, .MyCalendar .ajax__calendar_active .ajax__calendar_month, .MyCalendar .ajax__calendar_active .ajax__calendar_year
            {
                color: black;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p>
            <br />
        </p>
        <form id="form1" runat="server">
        <ajaxToolkit:ToolkitScriptManager ID="RegisterScriptManager" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
        <table cellspacing="1" class="centertable">
            <tr>
                <th colspan="2">
                    Pick Date
                </th>
            </tr>
            <tr>
                <td>
                    Date
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <ajaxToolkit:CalendarExtender ID="AjCalendar" runat="server" TargetControlID="TextBox1"
                        FirstDayOfWeek="Monday" Format="dd-MM-yyyy" CssClass="MyCalendar">
                    </ajaxToolkit:CalendarExtender>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
    
     
    </o:p>

    Thanks.<o:p></o:p>

     

    Tuesday, March 10, 2009 3:32 AM
  • User-183024123 posted

    Lance, thanks for the help.  Unfortunately your simple example doesn't solve all the problems I encountered.  In fact it accomplished the same thing as encapsulating the textbox/calendarextender using the DIV ...and fixed 90% of the problems.

     I have created a simple project that represents the Asp.net Theme and associated .CSS file that is used for one of the grids used in my 40-page Intranet application of which uses 10+ style sheets and various styles for different grids.  Yes, in simple 3-4 page webapps with simple CSS troubleshooting these types of problems is not that difficult.  However when using 100's of styles it can be very time consuming and difficult to fix.  It would be nice if the calendar extender had a simple way of isolating it's CSS rules from anything else on the page.  Having to hunt down and override existing styles is also time consuming and doesn't fix everything all the time as it's impossible to know what type of CSS developers are applying to grids, tables, etc.

    Here is a sample app I put together this morning that uses your exact rules above.  As you can see *most* of the calendar looks correct however there are still vertical borders within each cell/column due to the cascading css from the gridview css.

    I was able to resolve all my issues earlier using the DIV approach via the below rules.  The border rule removes the vertical borders you will see in the example project below.

     

    .calendarContainer table tr td

    {

    padding: 0 !important;

    margin: 0 !important;

    border-width: 0px !important;

    }

     http://home.comcast.net/~tophog/WebSite1.zip

    Tuesday, March 10, 2009 11:38 AM
  • User-1874212498 posted

    Thank You!!! I also spent a good hour trying to figure out why on earth the days are displayed like months? Only to change the containing table padding from 20px to 10px and watch the calendar days also shrink...

    Tuesday, September 7, 2010 8:54 AM
  • User389187297 posted

    Hi - I ran into the same aggravating thing.  Low tech solution that fixed it for me was to give the table a class name called Default in the CSS file.

    IE - the CSS file used to contain:

    table { width: 436px; }

    changed to:

    table.Default {width: 436px; }  

    Then in your web page (you probably already know this) <table class="Default"></default>.  As soon as I made the change it fixed the problem; believe me I farted around with all kinds of things before finally landing on the simple fix.  (I tried arguably whacky things like nesting classes named .cal_Theme1 .ajax__calendar_days .table and variations thereof.)

    Hope this helps.

    Eric

    Saturday, November 20, 2010 3:54 PM
  • User1681979264 posted

    Not sure if anyone else is still running into this problem, but after a few hours of trying many other things the following worked for me (to get the style back to default) for controls inside a table cell.  Note I had to wrap all controls in the table cell in a div referencing the following cssclass (not just the extender itself):

    This is a combination of a few suggestions found here.

    <style type="text/css">
    .calendarContainer table tr td
    {
        height: 0px;
        width: 0px;
        padding: 0 !important;
        margin: 0 !important;
        border-width: 0px !important;
    }
    </style>

     

     

    Thursday, December 30, 2010 10:17 AM
  • User463012646 posted

    Thanks bwodicka

    Same problem i had encountered. Which is fixed by keeping all control in the template under div and applying class calendarContainer to that div.

    Monday, October 17, 2011 3:50 AM
  • User1494596487 posted

    Thank you bwodicka that solved my problem.

    Monday, January 12, 2015 1:21 PM