Making text wrap in PanelBar

[Steve Newbery]

Text in my panelbar doesn't wrap within one list item, using the Telerik skin. This forces the whole thing to be too wide. I can see that it is because of the "white-space" css attribute being "nowrap".

Two questions: how can I change this attribute? I want to just override the default setting, maybe by using !important?

Second, if I do change that attribute then the line height is far too big (I can test it via Developer Toolbar for example) - I don't see how to fix that.

I want wrapping and line spacing like in the Vista skin. But I want the "look" of the Telerik skin...

Can anyone help?

[Shinu]

Hi Steve,

Go through the following forum link which explains how to wrap text in PanelBar.
Text inside a panelbar

Shinu.

[Steve Newbery]

Shinu, thanks but that thread refers to a panelbar using a template. I am not using a template, I just need to override the built-in skin's css. 

[Alex Gyoshev]

Hi Steve Newbery,

In order to override the white-space property, you can use the following CSS:

div.RadPanelBar_Telerik
{
    white-space: normal !important;
}

The line-height can be adjusted with this CSS:

/* this is for root group items */
div.RadPanelBar_Telerik .rpLink
{
    line-height: 13px !important;
}

/* this is for subgroup items */
div.RadPanelBar_Telerik .rpGroup .rpLink
{
    line-height: 10px !important;
}

Please take note that after changing the line height the height of the items will be changed - this can be fixed by setting padding-top and padding-bottom to the rpLinks accordingly. Also, the properties will be inherited by subgroup items, therefore they will also need some adjustments.

Sincerely yours,
Alex
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center