RadPanel Bar Highlighted on 2 lines

3 posts, 1 answers
  1. ttaylor29
    ttaylor29 avatar
    9 posts
    Member since:
    Mar 2013

    Posted 24 Jul 2013 Link to this post

    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.
  3. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2020 posts

    Posted 29 Jul 2013 Link to this post

    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.
  5. ttaylor29
    ttaylor29 avatar
    9 posts
    Member since:
    Mar 2013

    Posted 29 Jul 2013 Link to this post

    Thanks! This helped a ton!
Back to Top