Ajax CalendarExtender control clipping my calendar

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

 

4 Responses to Ajax CalendarExtender control clipping my calendar

  1. kamarthi says:

    hello
    i am also facing the same problem, i am quite new these web things…
    i just tried putting your soln into the css file..but did’nt work, could u tell me what is wrong .here are some details

    .MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color: lemonchiffon;
    color: red;
    }
    .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;
    }
    .div .ajax__calendar_days,table,tr,td
    {
    padding-right:0px;
    }

  2. tonywr says:

    Hi Kamarthi, remove the commas. There should only be spaces between the .ajax__calendar_days table tr td tags.

  3. mattfrear says:

    Thanks for the post. I found it via the asp.net forums.

    In my situation I needed to add this to my stylesheet:

    div.ajax__calendar_days table tr td
    {
    padding:0px;
    }

  4. […] cleaner summary of the issue and a simple solution can be found here as […]

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: