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_months{top: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
<meta name="viewport" content="width = device-width" />
Yes, you actually type "device-width", that will ask the device viewing your page for its width and use it.
链接地址: http://www.djcxy.com/p/87560.html上一篇: 使用PHP从文本中删除内联CSS和类
下一篇: 超大型日历软件