Ajax calendar not displaying correctly at first time in .net?

Question

I am using AJAXToolKit calendar in visual studio. I can't find the styles. Please look at the image, when the page loads, when i click the calendar icon, the extender does not have any styles.

After i selected some date, the styles are working properly.

So, Basically the styles are working if it has value.

Without Value:

With Value:

aspx code:

<tr>
  <td>
    <asp:Label ID="IncidentDate_edit_lbl" runat="server" Text="Date: " CssClass="labelstyle"></asp:Label>
  </td>

  <td>
    <asp:TextBox ID="IncidentDate_edit_tbx" AutoPostBack="true" runat="server" CssClass="blueLabelStyle" Text='<%#Bind("Incident_Date")%>'></asp:TextBox>
    <asp:ImageButton ID="IncidentDate_edit_ibtn" runat="server" ImageUrl="~/Images/Calendar-icon.png" Height="20px" Width="20px" />
    <cc1:CalendarExtender ID="incidentdate_edit_calendarextend" runat="server" TargetControlID="IncidentDate_edit_tbx" EnabledOnClient="true" Format="dd-MM-yyyy" 
                                            PopupButtonID="IncidentDate_edit_ibtn">
    </cc1:CalendarExtender>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Invalid Date" ValidationGroup="Incident"
                                            ValidationExpression="\d{1,2}-\d{1,2}-\d{4}" Display="None" ControlToValidate="IncidentDate_edit_tbx">                                                                        
                                        </asp:RegularExpressionValidator>
    <cc1:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="RegularExpressionValidator1">
    </cc1:ValidatorCalloutExtender>                                    
  </td>
</tr>  

Answer 1

Its a setting in your Web.config

add the following to the bottom of your web.config

<ajaxControlToolkit useStaticResources="true" renderStyleLinks="true" /></configuration>

Answer 2

Check the complete style

    <style type="text/css">
     .ajax__calendar_container {
        padding: 4px;
        position: absolute;
        cursor: default;
        width: 170px;
        font-size: 11px;
        text-align: center;
        font-family: tahoma,verdana,helvetica;
    }

    .ajax__calendar_body {
        height: 139px;
        width: 170px;
        position: relative;
        overflow: hidden;
        margin: auto;
    }

    .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {
        top: 0px;
        left: 0px;
        height: 139px;
        width: 170px;
        position: absolute;
        text-align: center;
        margin: auto;
    }

    .ajax__calendar_container TABLE {
        font-size: 11px;
    }

    .ajax__calendar_header {
        height: 20px;
        width: 100%;
    }

    .ajax__calendar_prev {
        cursor: pointer;
        width: 15px;
        height: 15px;
        float: left;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-image: url(WebResource.axd?d=vuxhVfo1YLyjqq0iGRXgQLQX43rVnAr0061zfFv0yrJptA2vlKQIjqV6bQH7kcz62NSlNo4XlKkgaWR89p2wWS0-_eYynob71_2kyJ_BbCehN90iBwIVlHvOujE4LEMnC_XgRxhDLUgjt5q6z-RyhBJEqA0I88WHStYXd8XDskQ1&t=633885366380000000);
    }

    .ajax__calendar_next {
        cursor: pointer;
        width: 15px;
        height: 15px;
        float: right;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-image: url(WebResource.axd?d=1vEP8Pv3XMqD6PfaIev5s6qGIqSFwx2eI9GjFosFKgLLJo8GkIOA59ujgqiG0gCg8XxgaPKCBQazTqQPIxNumjgdpN7yZMBP2ZzOnYX70AkEhvKWlRzNTNKTKL36xKq8nFeBI-IuZ7k4FJoWSKj4oxp2Bnx546ji6VGnO1TwPsM1&t=633885366380000000);
    }

    .ajax__calendar_title {
        cursor: pointer;
        font-weight: bold;
    }

    .ajax__calendar_footer {
        height: 15px;
    }

    .ajax__calendar_today {
        cursor: pointer;
        padding-top: 3px;
    }

    .ajax__calendar_dayname {
        height: 17px;
        width: 17px;
        text-align: right;
        padding: 0 2px;
    }

    .ajax__calendar_day {
        height: 17px;
        width: 18px;
        text-align: right;
        padding: 0 2px;
        cursor: pointer;
    }

    .ajax__calendar_month {
        height: 44px;
        width: 40px;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
    }

    .ajax__calendar_year {
        height: 44px;
        width: 40px;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
    }

    .ajax__calendar .ajax__calendar_container {
        border: 1px solid #646464;
        background-color: #ffffff;
        color: #000000;
    }

    .ajax__calendar .ajax__calendar_footer {
        border-top: 1px solid #f5f5f5;
    }

    .ajax__calendar .ajax__calendar_dayname {
        border-bottom: 1px solid #f5f5f5;
    }

    .ajax__calendar .ajax__calendar_day {
        border: 1px solid #ffffff;
    }

    .ajax__calendar .ajax__calendar_month {
        border: 1px solid #ffffff;
    }

    .ajax__calendar .ajax__calendar_year {
        border: 1px solid #ffffff;
    }

    .ajax__calendar .ajax__calendar_active .ajax__calendar_day {
        background-color: #edf9ff;
        border-color: #0066cc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_active .ajax__calendar_month {
        background-color: #edf9ff;
        border-color: #0066cc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_active .ajax__calendar_year {
        background-color: #edf9ff;
        border-color: #0066cc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_other .ajax__calendar_day {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #646464;
    }

    .ajax__calendar .ajax__calendar_other .ajax__calendar_year {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #646464;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_day {
        background-color: #edf9ff;
        border-color: #daf2fc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_month {
        background-color: #edf9ff;
        border-color: #daf2fc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_year {
        background-color: #edf9ff;
        border-color: #daf2fc;
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_title {
        color: #0066cc;
    }

    .ajax__calendar .ajax__calendar_hover .ajax__calendar_today {
        color: #0066cc;
    }
</style>

Answer 3

I think this is a CSS problem, try this in the header of your page:

<style type="text/css">
    .ajax__calendar_container { z-index : 1000; }
</style>

If value 1000 doesn't work, try 5000.

If that doesn't work try this:

<style type="text/css">
    .ajax__calendar {
        position: relative;
        left: 0px !important;
        top: 0px !important;
        visibility: visible; display: block;
    }
    .ajax__calendar iframe
    {
        left: 0px !important;
        top: 0px !important;
    }
</style>

Hope that helps!