[Solved] Wrap text for subitems

[Joe]

Hi!

I've got a problem with subitems not wrapping properly and text just being cut off...
Not sure what am I doing wrong, please help!! Attached the screenshot...

Here's the CSS in the custom skin:

/* <subitems> */
.RadPanelBar_ProdPanelBannered .rpGroup
{

}

.RadPanelBar_ProdPanelBannered .rpLevel1 .rpLink
{
    display:block;
    border-collapse:collapse;
    width:210px;
    height: 16px;
    background:#FFFFFF;
    font: 10px/14px Arial, sans-serif !important;
    font-weight: bold !important;
    color:#D12421;
    text-align:left;
    border-bottom:1px solid #EDB512 !important;
    border-top:1px solid #FFFFFF !important;
    padding:0px 0px 0px 10px;
    margin-right:10px;
    margin-left: 10px;
    whitewhite-space: normal;
    float: left;
}


.RadPanelBar_ProdPanelBannered .rpLevel1 .rpLink:hover,
.RadPanelBar_ProdPanelBannered .rpLevel1 .rpSelected
{
    display:block;
    border-collapse:collapse;
    width:210px;
    height: 16px;
    background:#EDB512 !important;
    font: 10px/14px Arial, sans-serif !important;
    font-weight: bold !important;
    color:#D12421;
    text-align:left;
    border-bottom:1px solid #EDB512 !important;
    border-top:1px solid #FFFFFF !important;
    padding:0px 0px 0px 10px;
    margin-right:20px;
    margin-left: 10px;
    whitewhite-space:normal;
    float: left;
}

.RadPanelBar_ProdPanelBannered .rpGroup .rpLink,
.RadPanelBar_ProdPanelBannered .rpGroup .rpTemplate
{

}

.RadPanelBar_ProdPanelBannered .rpGroup .rpLink:hover
{

}

.RadPanelBar_ProdPanelBannered .rpGroup .rpLink,
.RadPanelBar_ProdPanelBannered .rpGroup .rpLink .rpOut
{

}

.RadPanelBar_ProdPanelBannered .rpGroup .rpSelected,
.RadPanelBar_ProdPanelBannered .rpGroup .rpSelected:hover
{

}

/* <subitems (disabled)> */
.RadPanelBar_ProdPanelBannered .rpGroup .rpDisabled,
.RadPanelBar_ProdPanelBannered .rpGroup .rpDisabled:hover,
.RadPanelBar_ProdPanelBannered .rpGroup .rpDisabled .rpOut
{

}

.RadPanelBar_ProdPanelBannered .rpGroup .rpDisabled,
.RadPanelBar_ProdPanelBannered .rpGroup .rpDisabled:hover
{

}
/* <subitems (disabled)> */

/* </subitems> */


/* <background positioning> */
.RadPanelBar_ProdPanelBannered .rpLink,
.RadPanelBar_ProdPanelBannered .rpExpanded
{

}

.RadPanelBar_ProdPanelBannered .rpFocused,
.RadPanelBar_ProdPanelBannered .rpLink:hover,
.RadPanelBar_ProdPanelBannered .rpExpanded:hover
{

}

.RadPanelBar_ProdPanelBannered .rpSelected,
.RadPanelBar_ProdPanelBannered .rpSelected:hover
{

}

.RadPanelBar_ProdPanelBannered .rpFirst .rpLink,
.RadPanelBar_ProdPanelBannered .rpFirst .rpExpanded
{

}

.RadPanelBar_ProdPanelBannered .rpFirst .rpFocused,
.RadPanelBar_ProdPanelBannered .rpFirst .rpLink:hover
{

}

.RadPanelBar_ProdPanelBannered .rpFirst .rpSelected,
.RadPanelBar_ProdPanelBannered .rpFirst .rpSelected:hover
{

}

/* <root items (disabled)> */
.RadPanelBar_ProdPanelBannered .rpDisabled:hover
{
    cursor: ProdPanelBannered;
}

.RadPanelBar_ProdPanelBannered .rpDisabled,
.RadPanelBar_ProdPanelBannered .rpDisabled:hover,
.RadPanelBar_ProdPanelBannered .rpDisabled:hover .rpOut
{
    /*background-position: 0 0;*/
}
/* </root items (disabled)> */

/*      <expand arrows> */
.RadPanelBar_ProdPanelBannered .rpExpandable .rpText,
.RadPanelBar_ProdPanelBannered .rpExpanded .rpText
{

}

.RadPanelBar_ProdPanelBannered_rtl .rpExpandable .rpText,
.RadPanelBar_ProdPanelBannered_rtl .rpExpanded .rpText
{

}

.RadPanelBar_ProdPanelBannered_rtl .rpGroup .rpText
{

}

.RadPanelBar_ProdPanelBannered .rpExpandable .rpText {  }
.RadPanelBar_ProdPanelBannered .rpExpanded .rpText {  }
.RadPanelBar_ProdPanelBannered_rtl .rpExpandable .rpText {  }
.RadPanelBar_ProdPanelBannered_rtl .rpExpanded .rpText {  }

.RadPanelBar_ProdPanelBannered .rpExpandable.rpSelected .rpText,
.RadPanelBar_ProdPanelBannered .rpExpandable.rpSelected:hover .rpText
{

}

.RadPanelBar_ProdPanelBannered .rpExpanded.rpSelected .rpText,
.RadPanelBar_ProdPanelBannered .rpExpanded.rpSelected:hover .rpText
{

}

.RadPanelBar_ProdPanelBannered_rtl .rpExpandable.rpSelected .rpText,
.RadPanelBar_ProdPanelBannered_rtl .rpExpandable.rpSelected:hover .rpText
{

}

.RadPanelBar_ProdPanelBannered_rtl .rpExpanded.rpSelected .rpText,
.RadPanelBar_ProdPanelBannered_rtl .rpExpanded.rpSelected:hover .rpText
{

}

/*      </expand arrows> */

.RadPanelBar_ProdPanelBannered .rpGroup .rpLink,
.RadPanelBar_ProdPanelBannered .rpGroup .rpLink .rpOut {  }

.RadPanelBar_ProdPanelBannered .rpGroup .rpLink:hover,
.RadPanelBar_ProdPanelBannered .rpGroup .rpFocused {  }
.RadPanelBar_ProdPanelBannered .rpGroup .rpLink:hover .rpOut,
.RadPanelBar_ProdPanelBannered .rpGroup .rpFocused .rpOut {  }

/*      <subitems (selected)> */
.RadPanelBar_ProdPanelBannered .rpGroup .rpSelected,
.RadPanelBar_ProdPanelBannered .rpGroup .rpSelected:hover {  }
.RadPanelBar_ProdPanelBannered .rpGroup .rpSelected .rpOut,
.RadPanelBar_ProdPanelBannered .rpGroup .rpSelected:hover .rpOut {  }
/*      </subitems (selected)> */

/*      <subitems (expand arrows)> */
.RadPanelBar_ProdPanelBannered .rpGroup .rpExpandable .rpText,
.RadPanelBar_ProdPanelBannered .rpGroup .rpExpandable:hover .rpText {  }
.RadPanelBar_ProdPanelBannered .rpGroup .rpExpanded .rpText,
.RadPanelBar_ProdPanelBannered .rpGroup .rpExpanded:hover .rpText {  }
.RadPanelBar_ProdPanelBannered_rtl .rpGroup .rpExpandable .rpText,
.RadPanelBar_ProdPanelBannered_rtl .rpGroup .rpExpandable:hover .rpText {  }
.RadPanelBar_ProdPanelBannered_rtl .rpGroup .rpExpanded .rpText,
.RadPanelBar_ProdPanelBannered_rtl .rpGroup .rpExpanded:hover .rpText {  }
/*      </subitems (expand arrows)> */
/* </background positioning> */

[Kamen Bundev]

Hi Joe,

This happens because you are setting height on your sub items. To allow the rows to expand, you need to set line-height instead. So, remove the height property and set the line height directly in the font tag (in green):
.RadPanelBar_ProdPanelBannered .rpLevel1 .rpLink  
{  
    ...
    font: 10px/14px Arial, sans-serif !important;  
    ...
}
This should help.

Sincerely yours,
Kamen Bundev
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.

[Joe]

Thanks very much Kamen, that's worked a treat!!