ASP.Net - CalendarExtender CSS Fix

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>

Please note that we won't show your email to others, or use it for sending unwanted emails. We will only use it to render your Gravatar image and to validate you as a real person.

Scenario:

Explanation:

Solution:

Leave a comment