Increasing the Hight of the Highlight

4 posts, 1 answers
  1. Darren
    Darren avatar
    4 posts
    Member since:
    Oct 2012

    Posted 11 Dec 2012 Link to this post

    Have added 30px x 30px Image to a RadPanelItem on a RadPanelBar which looks fine until I hover over the item when transparent highlight cuts through the image.  The Height attribute does not seem to increase the size of the highlight, how is this done?

    Thanks Darren
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 14 Dec 2012 Link to this post

    Hello Darren,

    Could you please elaborate a bit more on your scenario since we are unable to reproduce that issue locally?
    Providing your markup code and a sample image file would be very helpful in order to inspect the problem deeper and be more helpful.

    Regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Darren
    Darren avatar
    4 posts
    Member since:
    Oct 2012

    Posted 14 Dec 2012 Link to this post

    Have just made a simple list of links using the panel bar.  At present no code behind has been added, I was just looking at using the panel bar for a navigaton page.
            <telerik:RadPanelItem runat="server" Text="Statutory Reports" Expanded="true">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Performers List" Expanded="true" ImageUrl="~/Secure/Images/_HomePage/def_GP.png" Height="32"  NavigateUrl="~/Secure/ContractorProfileList.aspx">
                    </telerik:RadPanelItem>
                     
                    <telerik:RadPanelItem runat="server" Text="Screening Returns" Expanded="true">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="Cervical Cancer Screening" ToolTip="KC53 Aggregated Annual Returns" Expanded="true" ImageUrl="~/Secure/Images/_HomePage/def_KC53.png">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Breast Cancer Screening" ToolTip="KC63 Aggregated Annual Returns" Expanded="true" ImageUrl="~/Secure/Images/_HomePage/def_KC63.png">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

  5. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 17 Dec 2012 Link to this post

    Hello Darren,

    It seems that the image size used for PanelBarItem icon is larger than our fixed size hover effect area in our sprite image. In this case I would recommend you two approaches to choose from:
    1. If you want to keep the rounded corners of the hover effect you will need to modify your sprite image and enlarge the hover effect area marked with red in the attached image.
    2. The second approach will not give you rounded corners hover effect but it is really easy for implementing and flexible if you will change your PanelBarItem height property. Disabling the hover effect loaded from the sprite image for the sub level elements and set back-ground color for those elements will give you the desired look. Below are the css classes that you can use for the second approach:

    <style type="text/css">
            .RadPanelBar_Default .rpLink:hover{
                 background: #afd8a4 !important;}
            .RadPanelBar_Default .rpGroup a.rpLink, .RadPanelBar_Default .rpGroup a.rpLink .rpOut {
                background-image:none !important;
            }
        </style>
    Hope that this will be helpful.

    Regards,
    Boyan Dimitrov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top