CODEWITHSUNDEEP
c#asp.netcssajaxajaxcontroltoolkit
lifeconfused
lifeconfused

Reputation: 31

ajax calendar extender - custom height causes view overlap

I have a calendar extender which is atatched to a hidden text box and a button.

<cc2:CalendarExtender ID="TextBox2_CalendarExtender" CssClass="custom-calendar" runat="server" TargetControlID="f_BookingDate" PopupButtonID="f_BookingDateButton"
    Format="dd/MM/yyyy" PopupPosition="BottomRight" FirstDayOfWeek="Monday" OnClientDateSelectionChanged="UpdateAvailability">
</cc2:CalendarExtender>

I am creating a seperate style sheet that will be applied to my page when it is a mobile visiting the page.

My problem is that my boss feels the standard size of the calendar is a bit small. And I am using which someone else suggested elsewhere, but its still too small.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

So its not a matter of zooming as I've seen suggested else where.

I was tinkering with the css and have so far come up with the below.

This is great as it makes each of the days larger and easier to select with your finger.

However when it comes to switching to months and years the way ajax seems to handle it is it applies a top:139px to the .ajax__calendar_days to shunt it off the calendar view.

But because each of my views are now 200px (just a test size will probably change this) the views now overlap at the top and bottom as you flick between them and it looks very messey.

Is there someway of controlling how the calendar defines it's sizes for on the fly changes?

/* Ajax Control Toolkit Calendar */

.ajax__calendar_container       
{
    left:5% !important;
    width:90% !important;
    background-color:#fff; 
    border:solid 1px #a6c9e2 !important;
}

.ajax__calendar_header      {background-color:#87b6d9; margin-bottom:5px; height: 26px !important;}
.ajax__calendar_prev    {}

.ajax__calendar_title   {height:26px; color:#fff; line-height:26px;}
.ajax__calendar_hover .ajax__calendar_title {color:#eee !important;}

.ajax__calendar_next    {}

.ajax__calendar_prev,.ajax__calendar_next{background-color:#dce6f4;width:26px !important; height:26px !important; color:#fff !important;}

.ajax__calendar_body        {width:100% !important; height:200px !important;}

.ajax__calendar_days    {width:100% !important; height:200px !important}
.ajax__calendar_months  {width:100% !important; height:200px !important}
.ajax__calendar_years   {width:100% !important; height:200px !important}

.ajax__calendar_months  table {height:200px !important}

.ajax__calendar_days table thead tr td {background-color:#fff; color:#000; font-weight:bold;}

.ajax__calendar_dayname {width:100% !important; text-align:center !important; border:0 !important;}

.ajax__calendar_day {text-align:center !important; border:1px solid #c5dbec !important; background:#eaf4fd; margin:1px !important; height:26px !important; width:90% !important;}

.ajax__calendar_month {text-align:center !important; width:100% !important;vertical-align:middle !important}

.ajax__calendar_month, .ajax__calendar_day {color:#2e6e9e; font-weight:bold; }

.ajax__calendar_year {text-align:center !important; }

.ajax__calendar_footer          {border-top:1px solid #c5dbec !important; line-height:1.2em;}

.ajax__calendar_today       {border:1px solid #c5dbec; background-color:#e1effb;}

.ajax__calendar_hover           {}
td.ajax__calendar_hover div     {background:#d2e6f5 !important; border:1px solid #79b7e7 !important;}

.ajax__calendar_active          {}
td.ajax__calendar_active div    {background:#fbec88 !important; border:1px solid #fad42e !important;}

.ajax__calendar_other           {}

.ajax__calendar_other .ajax__calendar_day {text-align:center !important; font-weight:normal !important; color:#bbb !important; border:1px solid #eee !important;}

.ajax__calendar_hover.ajax__calendar_other .ajax__calendar_day {background:#efefef !important; color:#aaa !important; border:1px solid #ddd !important;}

Upvotes: 1

Views: 5181

Answers (1)

lifeconfused
lifeconfused

Reputation: 31

I found the solution. I used the OnClientShown attribute

<cc2:CalendarExtender ID="TextBox2_CalendarExtender" CssClass="custom-calendar" runat="server" TargetControlID="f_BookingDate" PopupButtonID="f_BookingDateButton"
    Format="dd/MM/yyyy" PopupPosition="BottomRight" FirstDayOfWeek="Monday" OnClientDateSelectionChanged="UpdateAvailability" OnClientShown="onClientShown">
</cc2:CalendarExtender>

and then in my script

<asp:ScriptManager ID="f_WebBookingScriptManager" runat="server">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
    function onClientShown(sender, e) {
        sender._height = 200;
    }
</script>

this sets the dynamic height of the container. Its considered part of the calendars behaviour

Upvotes: 2

Related Questions