Requirement is to replace the < and > links in the Calendar titlebar to the text 'Previous Year' and 'Next Year' and make those links highlighted when the cursor hovers over them for both Firefox 3.5 and IE 7+ browsers. The CSS I defined in the .aspx file is below. It works fine in IE but the old 'CSS width property' issue with FF/IE is making the highlighted text appear inconsistent with IE (with the padding around the text). Any ideas on how to fix this?
<style type="text/css">
td.rcTitle{
color: black;
height: 3em;
}
/* provide extra room for the previous/next year text at the title edges */
.RadCalendar_Default .rcTitlebar .rcTitle{
width: 85%;
}
/* remove the fast previous/next <</>> links in the title bar */
.RadCalendar_Default .rcTitlebar .rcFastNext,
.RadCalendar_Default .rcTitlebar .rcFastPrev {
display: none;
}
.RadCalendar_Default .rcTitlebar a.rcNext:hover,
.RadCalendar_Default .rcTitlebar a.rcPrev:hover {
background-color: #c2cfe5;
border:1px solid #335ea8;
}
.RadCalendar_Default .rcTitlebar a.rcNext:active,
.RadCalendar_Default .rcTitlebar a.rcPrev:active {
background-color: #99afd4;
border:1px solid #335ea8;
}
/* display the previous/next year text */
.RadCalendar_Default .rcTitlebar a.rcNext,
.RadCalendar_Default .rcTitlebar a.rcPrev {
display: inline;
background: none;
overflow: visible;
text-decoration: underline;
color: black;
width: 110px;
text-indent:0px;
}
</style>
3 Answers, 1 is accepted
I am afraid I did not understand what the problem exactly is and what is the intended appearance of RadCalendar in this case, but I modified your styles a little and now the next/prev labels do not jump on hover, because the side borders are compensated by changing padding. Let me know if you need additional assistance.
<%@ Page Language="C#" %><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="content-type" content="text/html;charset=utf-8" /><title>RadControls</title><style type="text/css">td.rcTitle{color: black;height: 3em;}/* provide extra room for the previous/next year text at the title edges */.RadCalendar_Default .rcTitlebar .rcTitle{width: 85%; }/* remove the fast previous/next <</>> links in the title bar */table.RadCalendar_Default .rcTitlebar .rcFastNext,table.RadCalendar_Default .rcTitlebar .rcFastPrev {display: none;}.RadCalendar_Default .rcTitlebar a.rcNext:hover,.RadCalendar_Default .rcTitlebar a.rcPrev:hover {background-color: #c2cfe5;padding:0 0 5px;border:1px solid #335ea8; }.RadCalendar_Default .rcTitlebar a.rcNext:active,.RadCalendar_Default .rcTitlebar a.rcPrev:active {background-color: #99afd4;padding:0 0 5px;border:1px solid #335ea8; }/* display the previous/next year text */.RadCalendar_Default .rcTitlebar a.rcNext,.RadCalendar_Default .rcTitlebar a.rcPrev {background: none;overflow: visible;text-decoration: underline;color: black;width: 110px; padding:0 1px 5px;text-indent:0px;} </style></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" /><telerik:RadCalendar ID="RadCalendar1" runat="server" Width="280px" NavigationNextText="next month" NavigationPrevText="prev month" /></form></body></html>Best wishes,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
I am sending you screenshots of how IE7, IE8 and Firefox display the test page provided above. I don't see any noticable difference in the hover state width?
Greetings,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.