Calendar Title CSS active/hover issue

4 posts, 0 answers
  1. slang
    slang avatar
    4 posts
    Member since:
    May 2007

    Posted 10 Mar 2010 Link to this post

    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>

  2. Dimo
    Admin
    Dimo avatar
    8451 posts

    Posted 11 Mar 2010 Link to this post

    Hi Stephen,

    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"
     
    <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.
  3. slang
    slang avatar
    4 posts
    Member since:
    May 2007

    Posted 15 Mar 2010 Link to this post

    Thank-you.  That almost works except that for the Firefox browser the rectangular area that is the hover 'highlight' over the previous month/next month is nowhere near as wide and tall as it is for the IE browser.  Is there a way to define padding that will work consistently for FF and IE browsers?  I suspect this issue is related to the difference between how FF and IE interprets the CSS width property.
  4. Dimo
    Admin
    Dimo avatar
    8451 posts

    Posted 16 Mar 2010 Link to this post

    Hi Stephen,

    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.
Back to Top