Hi
I have customized the style sheet for the datepicker. When I open the calendar and I set the page zoom level not other than 100% and move my cursor over the dates in the calendar , i gives a weird color kind of thing. This does not happen when the page zoom is excat 100%. let me knwo how this can be solved .
I m pasting part of the style sheet
table.RadCalendar_Web20new
{
border-collapse:separate;
border: #6788be;
background:#fff;
/*font:12px "segoe ui",arial,sans-serif;*/
font:normal 12px Arial, Verdana, Sans-serif;
width:152.5px;
background: white url(Calendar/calendarBg.gif) repeat-x;
text-align:center;
overflow:hidden;
line-height:16px;
}
/*titlebar*/
.RadCalendar_Web20new .rcTitlebar
{
width:100%;
border:1px solid #6788be;
padding:0;
color:#fff;
background: #e7f1ff url(Calendar/calendarBg.gif) repeat-x;
}
.RadCalendar_Web20new .rcTitlebar table
{
width:100%;
border-collapse:separate;
border:0;
font:normal 12px Arial, Verdana, Sans-serif;
color:White;
}
.RadCalendar_Web20new .rcTitlebar td
{
border:0;
padding:0 0 2px;
text-align:center;
vertical-align:middle;
}
.RadCalendar_Web20new .rcTitlebar .rcTitle
{
width:100%;
cursor:pointer;
}
.RadCalendar_Web20new .rcTitlebar .rcPrev,
.RadCalendar_Web20new .rcTitlebar .rcNext,
.RadCalendar_Web20new .rcTitlebar .rcFastPrev,
.RadCalendar_Web20new .rcTitlebar .rcFastNext
{
display:block;
/*width:22px;*/
width:16px;
height:20px;
overflow:hidden;
margin:2px 0 0;
background: #e7f1ff url(Calendar/calendarBg.gif) repeat-x;
text-indent:-2222px;
text-decoration:none;
color:#ccc;
}
.RadCalendar_Web20new .rcTitlebar .rcFastPrev
{
margin-left:2px;
background-position:0 -200px;
}
.RadCalendar_Web20new .rcTitlebar .rcFastPrev:hover
{
background-position:0 -250px;
}
.RadCalendar_Web20new .rcTitlebar .rcPrev
{
background-position:0 -300px;
}
.RadCalendar_Web20new .rcTitlebar .rcPrev:hover
{
background-position:0 -350px;
}
.RadCalendar_Web20new .rcTitlebar .rcNext
{
background-position:0 -400px;
}
.RadCalendar_Web20new .rcTitlebar .rcNext:hover
{
background-position:0 -450px;
}
.RadCalendar_Web20new .rcTitlebar .rcFastNext
{
margin-right:2px;
background-position:0 -500px;
}
.RadCalendar_Web20new .rcTitlebar .rcFastNext:hover
{
background-position:0 -550px;
}
.RadCalendar_Web20new .rcMain
{
width:100%;
border:1px solid #6788be;
border-top:0;
padding:0;
}
.RadCalendar_Web20new .rcMainTable
{
width:100%;
border-collapse:separate;
/* Ch */
border:1px solid;
color:#000;
font:normal 12px Arial, Verdana, Sans-serif;
}
/*header, footer*/
.RadCalendar_Web20new .rcHeader,
.RadCalendar_Web20new .rcFooter
{
border:1px solid #6788be;
border-top-color:white;
background:#e7f1ff;
border-top:0px;
padding:0;
}
.footertemplatecancel__Web20new
{
margin-right:13px;
margin-top:5px;
float:none;
}
.footertemplatetoday__Web20new
{
margin-top:5px;
float:none;
}
/*week numbers and days*/
.RadCalendar_Web20new tr.rcRow
{
width:16px;
line-height:16px;
}
.RadCalendar_Web20new .rcRow th,
.RadCalendar_Web20new .rcWeek th
{
border:1px,solid ;
background:#ecf4ff;
font-weight:bold;
vertical-align:middle;
cursor:default;
}
.RadCalendar_Web20new .rcWeek th
{
border-bottom:1px solid #bcd2f1;
padding:2px 6px 3px 0;
text-align:center;
width:16px;
line-height:16px;
}
.RadCalendar_Web20new .rcWeek .rcViewSel,
.RadCalendar_Web20new .rcRow th
{
/*width:13px;*/
width:16px;
/*border-right:1px solid #bcd2f1;*/
/* border-right:0px solid #bcd2f1;*/
/*padding:0 7px 0 9px;*/
text-align:center;
}
.RadCalendar_Web20new .rcWeek .rcViewSel
{
border-right-color:#ecf4ff;
}
/*date cells*/
.RadCalendar_Web20new .rcRow td
{
border:1px solid #fff;
padding:0px;
margin:0px;
text-align:center;
vertical-align:middle;
width:16px;
height:16px;
}
.RadCalendar_Web20new .rcMain .rcRow a,
.RadCalendar_Web20new .rcMain .rcRow span
{
display:block;
/*padding:1px 5px 1px 0;*/
padding:0px;
text-decoration:none;
color:#000;
}
.RadCalendar_Web20new .rcMain .rcWeekend
{
/*color:#444;*/
width:16px;
line-height:16px;
}
.RadCalendar_Web20new .rcMain .rcOtherMonth a
{
color:#777;
}
.RadCalendar_Web20new .rcMain .rcOutOfRange span
{
color:#777;
cursor:default;
}
.RadCalendar_Web20new .rcRow .rcHover ,
.RadCalendar_Web20new .rcRow .rcHover a
{
/*color:#0e3d4f;*/
background: transparent url(Calendar/HoverBg.gif) no-repeat;
padding:0px;
margin:0px;
width:16px;
line-height:16px;
}
.RadCalendar_Web20new .rcRow .rcToday ,
.RadCalendar_Web20new .rcRow .rcToday a
{
/*border-color:#dde1e4;*/
background: transparent url(Calendar/TodayBg.gif) no-repeat;
padding:0px;
margin:0px;
width:16px;
line-height:16px;
}
.RadCalendar_Web20new .rcRow .rcSelected ,
.RadCalendar_Web20new .rcRow .rcSelected a
{
color:#0d202b;
background: transparent url(Calendar/selectBg.gif) no-repeat;
padding:0px;
margin:0px;
width:16px;
line-height:16px;
}
/*multimonth view*/
table.RadCalendarMultiView_Web20new
{
width:auto;
}
.RadCalendarMultiView_Web20new .rcTitlebar
{
border-color:#243567;
/*background:#3b548c 0 -1200px repeat-x url('Calendar/sprite.gif');*/
background: #e7f1ff url(Calendar/calendarBg.gif) repeat-x;
}
.RadCalendarMultiView_Web20new .rcTitlebar table
{
/*line-height:28px;*/
line-height:16px;
}
.RadCalendarMultiView_Web20new .rcTitlebar .rcFastPrev:hover
{
background-position:0 -650px;
}
.RadCalendarMultiView_Web20new .rcTitlebar .rcPrev:hover
{
background-position:0 -750px;
}
.RadCalendarMultiView_Web20new .rcTitlebar .rcNext:hover
{
background-position:0 -850px;
}
.RadCalendarMultiView_Web20new .rcTitlebar .rcFastNext:hover
{
background-position:0 -950px;
}
.RadCalendarMultiView_Web20new .rcMain
{
border-color:#6788be;
}
.RadCalendarMultiView_Web20new .rcCalendar
{
width:160px;
border:1px solid #6788be;
padding:0;
}
.RadCalendarMultiView_Web20new .rcMainTable .rcTitle
{
border:0;
border-bottom:1px solid #6788be;
padding:0 0 2px;
/*background:#93b4df 0 -1000px repeat-x url('Calendar/sprite.gif');*/
background: #e7f1ff url(Calendar/calendarBg.gif) repeat-x;
color:#fff;
text-align:center;
/*line-height:22px;*/
line-height:16px;
}
/*month view*/
table.RadCalendarMonthView_Web20new
{
border-collapse: collapse ;
border:1px solid #6788be;
background:#fff;
font:normal 10px Arial, Verdana, Sans-serif;
color:#333;
overflow:hidden;
}
table.RadCalendarMonthView_Web20new td
{
border:0px;
padding:0px;
text-align: center;
vertical-align: middle;
border: 1px solid #d8dde0;
cursor: pointer;
padding: 4px;
font: bold 10px Arial, Verdana, Sans-Serif;
color: black;
}
.RadCalendarMonthView_Web20new #rcMView_Feb,
.RadCalendarMonthView_Web20new #rcMView_Apr,
.RadCalendarMonthView_Web20new #rcMView_Jun,
.RadCalendarMonthView_Web20new #rcMView_Aug,
.RadCalendarMonthView_Web20new #rcMView_Oct,
.RadCalendarMonthView_Web20new #rcMView_Dec
{
border-right:1px solid #6788be;
}
.RadCalendarMonthView_Web20new a
{
/*padding:2px 4px;*/
padding:0px;
text-align:center;
text-decoration:none;
color:#333;
overflow:hidden;
}
.RadCalendarMonthView_Web20new .rcSelected
{
border:1px solid #d8dde0;
color:#0d202b;
background: #a8c1e0;
color: black;
}
.RadCalendarMonthView_Web20new #rcMView_PrevY a,
.RadCalendarMonthView_Web20new #rcMView_NextY a
{
background : transparent url(Calendar/ContextMenuInputBg.gif) repeat-x;
display:block;
width:16px;
height:16px;
margin:0 auto;
text-align:center;
visibility:visible;
}
.RadCalendarMonthView_Web20new #rcMView_PrevY a
{
background-position:3px -2100px;
}
.RadCalendarMonthView_Web20new #rcMView_NextY a
{
background-position:5px -2200px;
}
.RadCalendarMonthView_Web20new .rcButtons
{
padding:5px 7px 3px;
text-align:center;
}
.RadCalendarMonthView_Web20new input
{
border:1px solid;
border-color:#0f1d48 #08122e #010615;
/*background:#607fc5 0 -2300px repeat-x url('Calendar/sprite.gif');*/
background: #e7f1ff url(Calendar/calendarBg.gif) repeat-x;
color:#fff;
/*font:12px "segoe ui",arial,sans-serif;*/
font:normal 11px Arial, Verdana, Sans-serif;
cursor:pointer;
padding: 0px 2px;
}
/* .RadCalendarMonthView_Web20new input:hover
{
border-color:#3f5f94;
background-color:#c1d5ef;
background-position:0 -2350px;
color:#0f3789;
} */
.RadCalendarMonthView_Web20new #rcMView_Today
{
margin:0 0 0 0;
padding:0px;
border-color:#6788be;
}
.RadCalendarMonthView_Web20new #rcMView_OK
{
/*padding:0 0.2em;*/
padding:0px;
border-color:#6788be;
}
.RadCalendarMonthView_Web20new #rcMView_OK a
{
/*padding:0 0.2em;*/
padding:0px;
border-color:#6788be;
}
.RadCalendarMonthView_Web20new #rcMView_Cancel
{
padding:0px;
border-color:#6788be;
}
/*time view*/
table.RadCalendarTimeView_Web20new
{
border-collapse:separate;
border:1px solid #6788be;
background:#fff;
/*font:12px "segoe ui",arial,sans-serif;*/
font:normal 12px Arial, Verdana, Sans-serif;
}
.RadCalendarTimeView_Web20new th
{
border:0;
border-bottom:1px solid #6788be;
padding:0 0 2px;
/*background:#93b4df 0 -1000px repeat-x url('Calendar/sprite.gif');*/
background: #e7f1ff url(Calendar/calendarBg.gif) repeat-x;
color:#fff;
text-align:center;
/*line-height:22px;*/
line-height:16px;
cursor:default;
font-weight:normal;
}
table.RadCalendarTimeView_Web20new td
{
border:0;
border-left:1px solid #6788be;
padding:2px 2px 3px;
}
Thank you
John
1 Answer, 1 is accepted
0
Hello John,
I can't reproduce the problem, because I don't have your background images, however, it looks like the issue is that the background images are not repeated and when you zoom the page, they are not large enough to span over the date table cells. Please either set the background images to repeat or use background colors in addition to the background images, as it is done in our embedded skins.
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I can't reproduce the problem, because I don't have your background images, however, it looks like the issue is that the background images are not repeated and when you zoom the page, they are not large enough to span over the date table cells. Please either set the background images to repeat or use background colors in addition to the background images, as it is done in our embedded skins.
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.