supersize calendarextender

How can I resize the ajax control toolkit’s calendarextender so it’s touch friendly, I have modified the css properties successfully but when selecting months or years, the months (or years) overlap the days, and don’t collapse after making a selection.Here is the css I’m using so far:.ajax__calendar_container padding:4px;position:absolute;cursor:default;width:450…

via Asp.Net Developed Tutorials » Search Results » ajax:

supersize calendarextender

How can I resize the ajax control toolkit’s calendarextender so it’s touch friendly, I have modified the css properties successfully but when selecting months or years, the months (or years) overlap the days, and don’t collapse after making a selection.
Here is the css I’m using so far:
.ajax__calendar_container padding:4px;position:absolute;cursor:default;width:450px;font-size:28px;text-align:center;font-family:tahoma,verdana,helvetica; z-index: 10000; .ajax__calendar_body height:360px;width:450px;position:relative;overflow:hidden;margin:auto; .ajax__calendar_days top:0px;left:0px;height:360px;width:450px;position:absolute;text-align:center;margin:auto; visibility: visible; .ajax__calendar_monthstop:0px;left:0px;width:450px;position:absolute;text-align:center;margin: 0 0 -5px 0; padding: 0 0 1px 0; overflow:hidden;background-color:#ffffff; .ajax__calendar_years top:0px;left:0px;width:450px;position:absolute;text-align:center;margin:-10px;overflow:hidden;
.ajax__calendar_container TABLE font-size:32px; .ajax__calendar_header height:40px;width:100%; z-index: 1000; .ajax__calendar_prev cursor:pointer;width:45px;height:45px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(<%=WebResource("AjaxControlToolkit.Calendar.arrow-left.gif")%>);background-color: #D3DEEF; .ajax__calendar_next cursor:pointer;width:45px;height:45px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(<%=WebResource("AjaxControlToolkit.Calendar.arrow-right.gif")%>);background-color: #D3DEEF; .ajax__calendar_title cursor:pointer;font-weight:bold; .ajax__calendar_footer height:33px; .ajax__calendar_today cursor:pointer;padding-top:3px; .ajax__calendar_dayname height:28px;width:34px;text-align:right;padding:0 4px -10px 0; .ajax__calendar_day font-size:20px;height:51px;width:54px;text-align:right;padding:0 4px;cursor:pointer; .ajax__calendar_month font-size:18px;height:45px;width:60px;text-align:center;cursor:pointer; overflow:hidden; vertical-align: middle;margin: -1px 0 1px 0; .ajax__calendar_year font-size:18px;height:46px;width:60px;text-align:center;cursor:pointer;overflow:hidden; vertical-align: middle;
.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 #D3DEEF; .ajax_calendar .ajax_calendar_month border:1px solid #D3DEEF;background-color:#ffffff; .ajax_calendar .ajax_calendar_year border:1px solid #D3DEEF;background-color:#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;
With this CSS styling, I can avoid overlapping, but then the months and years are no longer large enough, and don’t fill up the whole screen. Has anyone had any experience with this?
………………………..

I had a very similar question to this myself, and ended up finding almost more of a hack than a solution. But it works splendidly and doesn’t cause any problems for me:
Since I couldn’t scale the calendar up, I scaled everything else down and changed the zoom attributes of my page to start the user zoomed in enough that the calendar is sufficiently large.
See Showing mobile friendly web page without having to zoom in for help on setting an initial zoom. Also, I’ve discovered that the calendar is typically large enough (in my opinion) if you use
Yes, you actually type “device-width”, that will ask the device viewing your page for its width and use it.

For more info: supersize calendarextender

Asp.Net Developed Tutorials » Search Results » ajax

supersize calendarextender

Share this post:

Related Posts

Leave a Comment