Wrapped items - how to properly display

7 posts, 0 answers
  1. tmlipinski
    tmlipinski avatar
    131 posts
    Member since:
    Dec 2006

    Posted 22 May 2009 Link to this post

    Hi,

    I have a panel bar ("Default" skin) with items of various length. Some of them are short but some art long. These long items wrap as expected. But:
    - when I hoover over a wrapped item, only the first line is marked with grey background color
    - when I click such an item, the first line gets and remains marked but the next lines just disappear
    I would like, of course, such items to behave exactly as not-wrapped ones.

    How can I do it?

    Thanks in advance.
    Regards
    Tomasz
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 25 May 2009 Link to this post

    Hello tmlipinski,

    Unfortunately, all current Telerik 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.

    A possible workaround for the moment is to not wrap the items text, and use tooltip for displaying it. For example:

    ASPX:
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <style type="text/css">  
            .RadPanelBar  
            {  
                white-space: nowrap;  
            }  
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1">  
        </telerik:RadScriptManager> 
        <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Telerik" Width="150px">  
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">  
                    <Items> 
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1 has 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 has very long text">  
                        </telerik:RadPanelItem> 
                        <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">  
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 
        </form> 
    </body> 
    </html> 

    Code-behind:
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.UI;  
    using System.Web.UI.WebControls;  
    using Telerik.Web.UI;  
     
    public partial class _Default : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            foreach (RadPanelItem item in RadPanelBar1.GetAllItems())  
            {  
                item.ToolTip = item.Text;  
            }  
        }  
    }  
     

    Another option in this case is to make a pure CSS custom skin. It is relatively easy to set up a pure CSS skin. However, in the current implementation of the skins we use images because of the rounded corners. We do have plans to provide pure CSS skins though.

    Regards,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. tmlipinski
    tmlipinski avatar
    131 posts
    Member since:
    Dec 2006

    Posted 25 May 2009 Link to this post

    Hi,
    OK. I'll think over if I can replace real tooltips with just item names.
    Will this new pure CSS skin cover all your controls? I would appreciate such a "light" skin for all controls.

     

    Regards

    Tomasz

  5. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 25 May 2009 Link to this post

    Hi Tomasz,

    We'll do our best to provide one 'light' pure CSS skin for all Telerik controls; most probably (cross your fingers ;-) ) we'll manage to release it for SP2 due to be out later this week.

    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.
  6. tmlipinski
    tmlipinski avatar
    131 posts
    Member since:
    Dec 2006

    Posted 25 May 2009 Link to this post

    Great ;-)
    Tomasz
  7. tmlipinski
    tmlipinski avatar
    131 posts
    Member since:
    Dec 2006

    Posted 22 Oct 2009 Link to this post

    Hi,

    How is this "'light' pure CSS skin for all Telerik controls" doing? Will it be available in Q3 2009 release?

    Best regards
    Tomasz
  8. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 22 Oct 2009 Link to this post

    Hi tmlipinski,

    This 'light' skin is already available. It is call 'Simple'.

    Greetings,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017