Using ellipsis with items

[iTools]

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?

Jan

[Nikolay Tsenkov]

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.


Regards,
Nikolay Tsenkov
the Telerik team

[David McClelland]

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 {
                text-overflow: ellipsis;
        }

Thanks,
David McClelland

[Kate]

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,
Kate
the Telerik team