This is a migrated thread and some comments may be shown as answers.

RadPanel Bar Highlighted on 2 lines

2 Answers 27 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
ttaylor29
Top achievements
Rank 1
ttaylor29 asked on 24 Jul 2013, 01:45 PM

I have a radpanel bar that is used on the left side of the master page. We have some titles that are more than the width of the panel. Well when they go to a 2nd line, the highlighted part just goes over one row. Is there a way to make it go over both rows if the text word raps down to a 2nd line?

2 Answers, 1 is accepted

Sort by
0
Accepted
Boyan Dimitrov
Telerik team
answered on 29 Jul 2013, 07:48 AM
Hello,

I would like to clarify that your observations are absolutely correct. This unusual behavior is caused by the fact that we use a sprite image RadPanelBar root and child items background.

I would suggest two options too choose from in order to avoid that behavior:
  • Please find attached the sprite image used in our Default skin. You can use it as base image and modify its height value in order to fit your exact text length. One disadvantage of that approach is if your RadPanelBar item text is dynamically populated it might exceed that new fixed height and appear of the box.
  • Alternative way would be not to use a sprite image for background but change the text color if your selects or hovers specific RadPanelBar Item.This will work in case of dynamically created text since it just colors the content no matter of its length. Please find below all necessary css styles:

<style type="text/css">    
        html .RadPanelBar div.rpHeaderTemplate, html .RadPanelBar a.rpLink {
            background-image: none;
        }
        html .RadPanelBar li.rpFirst .rpFocused, html .RadPanelBar .rpFirst a.rpLink:hover {
            color:red;
        }
 
 
 
        html .RadPanelBar_Default li.rpFirst, html .RadPanelBar_Default .rpFirst a.rpSelected:hover {
            color: red;
        }
 
        html .RadPanelBar_Default .rpGroup a.rpLink, html .RadPanelBar_Default .rpGroup a.rpLink .rpOut {
            background-image: none;
        }
    </style>

Regards,
Boyan Dimitrov
Telerik
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 the blog feed now.
0
ttaylor29
Top achievements
Rank 1
answered on 29 Jul 2013, 12:37 PM
Thanks! This helped a ton!
Tags
PanelBar
Asked by
ttaylor29
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
ttaylor29
Top achievements
Rank 1
Share this question
or