Ajax CalendarExtender control clipping my calendar

August 28, 2007

I had this display problem with my date control in .net. Basically, it is a composite web control containing a textbox, a calendar image, a masked edit extender and a calendar extender control.  What was happening was that when the calendar image button was clicked, the calendar would popup, but half of Friday and the whole of Saturday was just not there! 

Here is an image of the issue: 

Clipped Calendar

Anyway, to cut a long story short, I figured it out. The calendar numbering looked a bit wide, so I got Firebug out and did an inspect. I found that there is a div next to the numbers that had a margin-right:10px. This div inherits from the default css settings for table, tr and td.  A quick bit of specific css fixed the problem. I added the following to my style sheet:

div.ajax__calendar_days table tr td

{

padding-right:0px;

}

and whalla! No more problem:

Calendar no longer clipped

 


How to use the Ajax Control Toolkit Calendar Extender control.

August 13, 2007

I have moved this article to a new blog location at my new company web site. The article may be found here: How to use the Ajax Control Toolkit Calendar Extender control.