[Solved] Problem with word-wrap in the list item of the rad combo box

[Mausami]

Hello,

When used the default skin provided by RadCombobox the items in the listbox get wrapped while viweing them in the list if the list item is long.

I am using custom skin for RadCombobox. Using this skin, I managed to get the required appearance but the wrap functionality doesn't seem to work.
 
Instead when any one of the item in the list is long I am getting a horizontal scroll bar in the list.

I even tried setting the NoWrap property to false.

I don't want the horizontal scroll bar in the list of items of the radComboBox; instead the word should be wrapped as it does for the normal skin.

 

Please help me solving this issue.
Am I going wrong anywhere in the stlyesheet that I have formed because of which the wrap is not working?

 Below is the definiton of the ComboBox  and the stylesheet file used.

    <telRAD:RadComboBox ID="radCombo" NoWrap="false" Height="70PX" runat="server" EnableEmbeddedSkins="false" Skin="radBP">
                                <Items>
                                    <telRAD:RadComboBoxItem  Value="A" Text="ADDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD"/>
                                    <telRAD:RadComboBoxItem  Value="B" Text="B"/>
                                    <telRAD:RadComboBoxItem  Value="C" Text="C"/>
                                    <telRAD:RadComboBoxItem  Value="D" Text="D"/>
                                    <telRAD:RadComboBoxItem  Value="E" Text="E"/>
                                    <telRAD:RadComboBoxItem  Value="F" Text="F"/>
                                </Items>
                            </telRAD:RadComboBox>

 

stylesheet file.

/* RadComboBox skin */
/*global*/
.RadComboBox_radBP *
{
margin:0;
padding:0;
}
.RadComboBox_radBP,
.RadComboBox_radBP input,
.RadComboBoxDropDown_radBP
{
font:12px verdana;
color:#999;
}
/* combobox */
.RadComboBox_radBP
{
vertical-align:bottom;
}
.RadComboBox_radBP table
{
border:0;
border-collapse:collapse;
}
.RadComboBox_radBP td
{
border: 0;
}
.RadComboBox_radBP .rcbInputCell
{
/*width:100%;
height:23px;
line-height:22px;
border:solid 1px blue;
vertical-align:top;*/
/*background: transparent url('ComboBox/rcbBg.gif') no-repeat;*/

border:1px solid #7F9DB9; 
background-color: white;
vertical-align: middle;
font-family: Verdana;
font-size: 0.9em;
color: black;
padding-left: 3px;
/*padding-top: 4px; 
padding-left: 3px;*/
height: 18px;
/*cursor: default;*/

}
.RadComboBox_radBP .rcbInputCellLeft { background-position: 0 0; padding-left: 5px; }
.RadComboBox_radBP .rcbInputCellRight { background-position: 100% 0; padding-right: 5px; }
.RadComboBox_radBP .rcbDisabled .rcbInputCellLeft { background-position: 0 -24px; }
.RadComboBox_radBP .rcbDisabled .rcbInputCellRight { background-position: 100% -24px; }
.RadComboBox_radBP .rcbHovered .rcbInputCellLeft { background-position: 0 -48px; }
.RadComboBox_radBP .rcbHovered .rcbInputCellRight { background-position: 100% -48px; }
.RadComboBox_radBP .rcbFocused .rcbInputCellLeft { background-position: 0 -72px; }
.RadComboBox_radBP .rcbFocused .rcbInputCellRight { background-position: 100% -72px; }
.RadComboBox_radBP .rcbInputCell input
{
width:100%;
/*background:transparent;*/
 border:0;
 vertical-align:top;
 background-color: white;
 vertical-align: middle;
 font-family: Verdana;
 font-size: 0.9em;
 color:Black;
}
.RadComboBox_radBP .rcbInputCell
{
padding: 0 0 0 2px;
}
.RadComboBox_radBP_rtl .rcbInputCell input
{
padding:4px 2px 3px 0;
}
.RadComboBox_radBP_rtl .rcbInputCell
{
padding: 0 2px 0 0;
}
.RadComboBox_radBP .rcbArrowCell
{
border: 0;
padding:0;
width:15px;
border: 1px solid #7F9DB9;
background:url('C:\Inetpub\wwwroot\GEMSHub\GEMSHubWebSite\RADControls\ComboBox\Skins\radCombo\DropArrow.gif') no-repeat;
}
/*.RadComboBox_radBP .rcbArrowCellLeft { background-position: -24px 0; }
.RadComboBox_radBP .rcbArrowCellRight { background-position: 0 0; }
.RadComboBox_radBP .rcbDisabled .rcbArrowCellLeft { background-position: -24px -24px; }
.RadComboBox_radBP .rcbDisabled .rcbArrowCellRight { background-position: 0 -24px; }
.RadComboBox_radBP .rcbHovered .rcbArrowCellLeft { background-position: -24px -48px; }
.RadComboBox_radBP .rcbHovered .rcbArrowCellRight { background-position: 0 -48px; }
.RadComboBox_radBP .rcbFocused .rcbArrowCellLeft { background-position: -24px -72px; }
.RadComboBox_radBP .rcbFocused .rcbArrowCellRight { background-position: 0 -72px; }*/
.RadComboBox_radBP .rcbArrowCell a
{
position:relative;
outline:none;
line-height:22px;
overflow:hidden;
display:block;
width:24px;
height:25px;
text-decoration:none;
text-indent: -9999px;
font-size: 0;
}
.RadComboBox_radBP .rcbHovered,
.RadComboBox_radBP .rcbHovered input,
.RadComboBox_radBP .rcbFocused,
.RadComboBox_radBP .rcbFocused input
{
color:Black;
}
.RadComboBox_radBP .rcbDisabled .rcbArrowCell a
{
cursor:no-drop;
}
.RadComboBox_radBP .rcbDisabled,
.RadComboBox_radBP .rcbDisabled input
{
color: #373737;
}
/* dropdown */
.rcbSlide
{
position:absolute;
overflow:hidden;
display:none;
_height:1px;
float:left;
}
.RadComboBoxDropDown_radBP
{
position:absolute;
background:#fff;
border: 1px solid #323232;
cursor:default;
font-size:0.9em;
text-align: left;
}
.RadComboBoxDropDown_radBP .rcbScroll
{
overflow:auto;
}
.RadComboBoxDropDown_radBP .rcbList
{
list-style:none;
margin:0;
padding:0;
}
.RadComboBoxDropDown_radBP .rcbNoWrap .rcbList
{
float:left;
WORD-WRAP:BREAK-WORD;
}

.RadComboBoxDropDown_radBP .rcbHeader
{
background:#202020;
border-bottom: 1px solid #141414;
color:#999;
padding:3px 0;
}
.RadComboBoxDropDown_radBP .rcbNoWrap .rcbItem,
.RadComboBoxDropDown_radBP .rcbNoWrap .rcbHovered,
.RadComboBoxDropDown_radBP .rcbNoWrap .rcbDisabled,
.RadComboBoxDropDown_radBP .rcbNoWrap .rcbLoading
{
white-space:nowrap;
WORD-WRAP:BREAK-WORD;
}
.RadComboBoxDropDown_radBP .rcbItem,
.RadComboBoxDropDown_radBP .rcbHovered,
.RadComboBoxDropDown_radBP .rcbDisabled,
.RadComboBoxDropDown_radBP .rcbLoading
{
padding:4px 20px 4px 4px;
zoom:1;
}
*+html .RadComboBoxDropDown_radBP .rcbItem,
*+html .RadComboBoxDropDown_radBP .rcbHovered,
*+html .RadComboBoxDropDown_radBP .rcbDisabled,
*+html .RadComboBoxDropDown_radBP .rcbLoading
{
zoom: normal;
}
.RadComboBoxDropDown_radBP_rtl .rcbItem,
.RadComboBoxDropDown_radBP_rtl .rcbHovered,
.RadComboBoxDropDown_radBP_rtl .rcbDisabled,
.RadComboBoxDropDown_radBP_rtl .rcbLoading
{
padding:4px 4px 4px 20px;
}
.RadComboBoxDropDown_radBP .rcbItem
{
 font-family: Verdana;
 font-size: 0.9em;
 color: #333333; 
 padding: 1px 0px 0px 3px; 
 text-decoration: none;
 text-align: left;
 _height:1%;
}
.RadComboBoxDropDown_radBP .rcbHovered
{
/*background:#343434 url('ComboBox/rcbDropDownHover.gif') repeat-x top left;*/
 font-family:Verdana ;
 font-size: 0.9em;
 color: white;
 text-decoration: none;
 /*background-color: #777777; */
 background-color: #316AC5;
 /*cursor: pointer;
 /*cursor: hand;*/
 padding: 1px 0px 0px 3px;
 text-align: left;
 _height:1%;
}
.RadComboBoxDropDown_radBP .rcbDisabled
{
color:#555;
cursor:no-drop;
}
.RadComboBoxDropDown_radBP .rcbLoading
{
background:#292929;
color: #505050;
text-align:center;
}
.RadComboBoxDropDown_radBP .rcbMoreResults
{
clear:both;
background:#292929;
padding:4px;
text-align:center;
border-top: 1px solid #141414;
}
.RadComboBoxDropDown_radBP .rcbMoreResults a
{
display:block;
width:7px;
height:6px;
/*background:url('ComboBox/rcbMoreResults.gif') no-repeat transparent;*/
margin:0 auto;
text-indent:-3333px;
overflow:hidden;
text-decoration:none;
cursor:pointer;
}
.RadComboBoxDropDown_radBP .rcbMoreResults span
{
display:block;
text-align:center;
}
.RadComboBoxDropDown_radBP .rcbScroll
{

}
/*hacks*/
/*Opera start*/
@media screen and (min-width:550px)
{
.RadComboBoxDropDown_radBP_rtl .rcbItem,
.RadComboBoxDropDown_radBP_rtl .rcbHovered,
.RadComboBoxDropDown_radBP_rtl .rcbDisabled,
.RadComboBoxDropDown_radBP_rtl .rcbLoading
{
 padding:4px 4px 4px 20px;
}
} /*Opera end*/

 

[Mausami]

Hi,

The version number of the rad combo box is 2009.1.402.20.

Thanks,
Mausami

[Yana]

Hello Mausami,

You should set white-space css property to "normal" in order to allow text to  wrap in the followng css style:

.RadComboBoxDropDown_radBP .rcbItem,
.RadComboBoxDropDown_radBP .rcbHovered,
.RadComboBoxDropDown_radBP .rcbDisabled,
.RadComboBoxDropDown_radBP .rcbLoading
{
 white-space:normal;
}

Best regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Mausami]

Hello Yana,

 

It worked.

Many thanks !!

 

Regards,

Mausami