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?
3 Answers, 1 is accepted
0
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.
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.
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.
0
Sean
Top achievements
Rank 2
Rank 2
answered on 03 Jun 2009, 01:31 PM
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.
Maybe I'll have to make a custom skin based on simple but with the Office2007 colouring.
0
Hi Sean,
Please find below a sample code snippet thatshows the needed approach.
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.
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.