Single post

ASP.NET AJAX CalendarExtender losing styles

If the AJAX CalendarExtender control shows up without any style information or in the wrong places, the simplest solution is to copy the original CSS for the Calendar’s default style (located at AjaxControlToolkit\Calendar\Calendar.css into your application’s CSS file. Also make sure the CssClass property is not defined in your CalendarExtender. The actual content of the default Calendar style is below:

<br />
.ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:170px;
    font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}<br />
.ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;
    margin:auto;}<br />
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;
    height:139px;width:170px;position:absolute;text-align:center;margin:auto;}<br />
.ajax__calendar_container <span class="caps">TABLE</span> {font-size:11px;}<br />
.ajax__calendar_header {height:20px;width:100%;}<br />
.ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;
    background-repeat:no-repeat;background-position:50% 50%;
    background-image:url(&lt; <span style="text-align:center;">WebResource(&quot;AjaxControlToolkit.Calendar.arrow-left.gif&quot;)</span>&gt;);}<br />
.ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;
    background-repeat:no-repeat;background-position:50% 50%;
    background-image:url(&lt; <span style="text-align:center;">WebResource(&quot;AjaxControlToolkit.Calendar.arrow-right.gif&quot;)</span>&gt;);}<br />
.ajax__calendar_title {cursor:pointer;font-weight:bold;}<br />
.ajax__calendar_footer {height:15px;}<br />
.ajax__calendar_today {cursor:pointer;padding-top:3px;}<br />
.ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}<br />
.ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}<br />
.ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}<br />
.ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}</p>

	<p>.ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;
    color:#000000;}<br />
.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}<br />
.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}<br />
.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}<br />
.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}<br />
.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}</p>

	<p>.ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;
    border-color:#0066cc;color:#0066cc;}<br />
.ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;
    border-color:#0066cc;color:#0066cc;}<br />
.ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;
    border-color:#0066cc;color:#0066cc;}</p>

	<p>.ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;
    border-color:#ffffff;color:#646464;}<br />
.ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;
    border-color:#ffffff;color:#646464;}</p>

	<p>.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;
    border-color:#daf2fc;color:#0066cc;}<br />
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;
    border-color:#daf2fc;color:#0066cc;}<br />
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;
    border-color:#daf2fc;color:#0066cc;}</p>

	<p>.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}<br />
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}<br />

LEAVE A COMMENT

theme by teslathemes