Sizing the panel

4 posts, 0 answers
  1. Sean
    Sean avatar
    11 posts
    Member since:
    Oct 2008

    Posted 02 Jun 2009 Link to this post

    Currently I have a panel bar set to 175px wide.  Some of the items though are a bit longer than that which causes them to wrap.  I'm ok with them wrapping but the hover image is never more than one line high so it looks funny that only half the text is highlighted.  Is there a way to get the highlighting to expand when the menu item wraps to two lines of text?
  2.
  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 03 Jun 2009 Link to this post

    Hello Sean,

    This is possible with the latest version of the control (2009.1.527) where we have introduced a new skin (named Simple). The rest of the skins use background images for the different states of the item, thus it is impossible to wrap the text of the item and 'extend' the image for the selected or hovered states.

    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="175px" Skin="Simple">  
    <Items> 
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
        <Items> 
            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1 with very long text">  
            </telerik:RadPanelItem> 
            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
            </telerik:RadPanelItem> 
        </Items> 
        </telerik:RadPanelItem> 
        <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
        <Items> 
            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
            </telerik:RadPanelItem> 
            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
            </telerik:RadPanelItem> 
        </Items> 
        </telerik:RadPanelItem> 
    </Items> 
    </telerik:RadPanelBar> 



    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Sean
    Sean avatar
    11 posts
    Member since:
    Oct 2008

    Posted 03 Jun 2009 Link to this post

    Would there be a way to size the panel bar to the size needed to not wrap the text, but no more than is needed so that there isn't a bunch of blank space if all the items are short?  That way the working space to the right of the menu is always as much as there can be.

    Maybe I'll have to make a custom skin based on simple but with the Office2007 colouring.
  7. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 03 Jun 2009 Link to this post

    Hi Sean,

    Please find below a sample code snippet thatshows the needed approach.

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <style type="text/css">  
            div.RadPanelBar  
            {  
                white-space: nowrap !important;  
                width: auto;  
                display: inline-block;  
            }  
            * + html .RadPanelBar  
            {  
                display: inline;  
            }  
            div.RadPanelBar .rpSlide  
            {  
                display: block !important;  
                height: 0;  
            }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        </telerik:RadScriptManager> 
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server">  
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
                    <Items> 
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1 with very long text with very long text with very long text">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">  
                    <Items> 
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">  
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 
     
        <script type="text/javascript">  
            function pageLoad() {  
                if ($telerik.isIE7 || $telerik.isIE6) {  
                    var panelBar = $telerik.$('#<%= RadPanelBar1.ClientID %>');  
     
                    panelBar.width(panelBar.find(".rpItem:first").width());  
                }  
            }  
        </script> 
     
        </form> 
    </body> 
    </html> 


    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top