Wrap text for subitems

3 posts, 0 answers
  1. Joe
    Joe avatar
    28 posts
    Member since:
    May 2007

    Posted 30 May 2010 Link to this post

    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. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 02 Jun 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joe
    Joe avatar
    28 posts
    Member since:
    May 2007

    Posted 03 Jun 2010 Link to this post

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