ASP.Net - CalendarExtender CSS Fix

Posted: 11/19/2013

Scenario:

You’re using the Ajax Control Toolkit and the padding on the table it renders is pushing portions of the control off the viewable area. This results in the days on the left and right of the calendar being invisible.

Explanation:

The markup that the extender is rendering is inheriting from an outer portion of the page. More than likely it’s inheriting padding on one of the table elements.

Solution:

There are two important pieces here. The first part is that I’m targeting the padding and the margin on the td elment for the style that the calendar extender is using. The second, and most important (har har) is the !important CSS directive that tells the browser to use this style over any other. If the “!important” tag is left off it will continue to inherit the padding (which would be bad). To quickly test, put this in the “head” tag of your page.

    <style>
        .ajax__calendar_container td {
            padding: 0 !important;
            margin: 0 !important;
        }
    </style>