This is a migrated thread and some comments may be shown as answers.

Wrap text for subitems

2 Answers 40 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 31 May 2010, 03:08 AM
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;  
    height16px;  
    background:#FFFFFF;  
    font10px/14px Arialsans-serif !important;  
    font-weightbold !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-left10px;    
    whitewhite-spacenormal;  
    floatleft;  
}  
 
 
.RadPanelBar_ProdPanelBannered .rpLevel1 .rpLink:hover,   
.RadPanelBar_ProdPanelBannered .rpLevel1 .rpSelected  
{  
    display:block;  
    border-collapse:collapse;  
    width:210px;  
    height16px;  
    background:#EDB512 !important;  
    font10px/14px Arialsans-serif !important;  
    font-weightbold !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-left10px;  
    whitewhite-space:normal;   
    floatleft;  
}  
 
.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> */ 

2 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 02 Jun 2010, 02:18 PM
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.
0
Joe
Top achievements
Rank 1
answered on 03 Jun 2010, 06:25 AM
Thanks very much Kamen, that's worked a treat!!
Tags
PanelBar
Asked by
Joe
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Joe
Top achievements
Rank 1
Share this question
or