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?
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.