Increasing the Hight of the Highlight

[Darren]

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

[Boyan Dimitrov]

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

[Darren]

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>

[Boyan Dimitrov]

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