Using ellipsis with items

4 posts, 0 answers
  1. iTools
    iTools avatar
    28 posts
    Member since:
    Jun 2007

    Posted 16 Sep 2010 Link to this post

    I am using a RadPanelBar for a navigation menu and this will eventually be used within a frameset which can have the frame width dynamically altered.  

    I am using a text-overflow:ellipsis css style on the text and that works fine in keeping the text together and not wrapping midword, however the problem is that as the width of my radpanel gets smaller the text in its entirety will wrap to the next line seperating from the icons(which I have placed at the left of each radpanelitem).  As far as I know I cannot use the css white-space:nowrap as that only applies to the text itself.  Is there any other way to make it so the radpanelitem as a whole does not wrap?

  2. Nikolay Tsenkov
    Nikolay Tsenkov avatar
    734 posts

    Posted 22 Sep 2010 Link to this post

    Hello jan fischer,

    Could you, please open a support ticket and send us a live url or a sample project?
    Thanks, this will be the best way to go about this.

    Nikolay Tsenkov
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. David McClelland
    David McClelland avatar
    9 posts
    Member since:
    Oct 2012

    Posted 26 Nov 2012 Link to this post

    Was there a resolution for this question?  I too would like to be able to use a custom CSS class for my RadPanelBar items to use the ellipsys style when the text gets too long for the item:

            .CustomCssClass1 .rpText {

    David McClelland
  4. Kate
    Kate avatar
    1898 posts

    Posted 29 Nov 2012 Link to this post

    Hello David,

    You can use the following css class selector in order to get the desired appearance of the RadPanelItem:
    div.RadPanelBar .rpText {
              overflow: hidden;
              text-overflow: ellipsis;
              width: 200px;
          div.RadPanelBar .rpText {
              padding: 0 3px;
          div.RadPanelBar .rpLevel1 .rpItem .rpLink .rpOut .rpText {
              overflow: hidden;
              text-overflow: ellipsis;
              width: 200px;
              height: 25px;

    All the best,
    the Telerik team
    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 their blog feed now.
Back to Top