Hi Telerik team;
Currently we have a web page in our site which is using radcombobox and after we upgraded to Q2 2010, the arrow cell image is getting cut off. We upgraded to .net 4.0 and the telerik to Q2 2010. Could you please take a look and let me know what the problem is? I tried setting EnableEmbeddedBaseStyleSheet = "false" and that did not fix it.
Here is the way the radcombobox is declared on the page:
<
telerik:RadComboBox ID="cmbRegion" runat="server" AllowCustomText="false" MarkFirstMatch="false" DropDownWidth="222" Width="185" EnableVirtualScrolling="false" EnableEmbeddedBaseStylesheet="false">
</telerik:RadComboBox>
I have attached images of the radcombobox before upgrade and after upgrade which shows the arrow being cut off.
Please see the stylesheet we are using for the radcombobox below:
Thanks a lot in advance for your help,
Meera
.RadComboBox_Response
*
{
margin:0;
padding:0;
}
.RadComboBox_Response
,
.RadComboBox_Response
.rcbInput,
.RadComboBoxDropDown_Response
{
font:12px arial,verdana,sans-serif;
color:#000;
}
/* combobox */
.RadComboBox_Response
{
vertical-align:bottom;
text-align: left;
}
.RadComboBox_Response
table
{
border:0;
}
.RadComboBox_Response
td.rcbInputCell
{
background: url('ComboBox/rcbBg.gif') no-repeat 0 0;
height:19px;
line-height:20px;
vertical-align:top;
padding:0;
border:0;
}
.RadComboBox_Response
td.rcbInputCellRight
{
background-position: 100% 0;
}
.RadComboBox_Response
.rcbDisabled .rcbInputCell .rcbInput
{
color: #999;
}
.RadComboBox_Response
.rcbHovered .rcbInputCell { background-position: 0 -21px; }
.RadComboBox_Response
.rcbHovered .rcbInputCellRight { background-position: 100% -21px; }
.RadComboBox_Response
.rcbFocused .rcbInputCell { background-position: 0 -42px; }
.RadComboBox_Response
.rcbFocused .rcbInputCellRight { background-position: 100% -42px; }
.RadComboBox_Response
td.rcbInputCell,
.RadComboBox_Response
.rcbInputCell .rcbInput
{
padding: 0 0 0 2px;
}
.RadComboBox_Response_rtl
td.rcbInputCell,
.RadComboBox_Response_rtl
.rcbInputCell .rcbInput
{
padding: 0 2px 0 0;
}
.RadComboBox_Response
.rcbInputCell .rcbInput
{
width:100%;
background:transparent;
vertical-align:top;
height: 16px;
border: 0;
margin-top: 2px;
outline: 0;
}
.RadComboBox_Response
.rcbInputCell .rcbEmptyMessage
{
color: #ccc;
font-style: italic;
}
.RadComboBox_Response
td.rcbArrowCell
{
width:24px;
padding:0;
border:0;
background:transparent url('ComboBox/rcbArrowCell.gif') no-repeat 0 0;
}
.RadComboBox_Response
.rcbArrowCellRight
{
background-position: 0 0;
}
.RadComboBox_Response
.rcbArrowCellLeft
{
background-position: 0 -21px;
}
.RadComboBox_Response
.rcbArrowCell a
{
line-height:21px;
width:24px;
height:21px;
text-decoration:none;
text-indent: -9999px;
font-size: 0;
}
.RadComboBox_Response
td.rcbArrowCellHidden,
.RadComboBox_Response
.rcbArrowCellHidden a
{
background: url('ComboBox/rcbBg.gif') no-repeat top right;
width: 1px;
}
.RadComboBox_Response_rtl
.rcbArrowCell a
{
text-indent: 9999px;
}
.RadComboBox_Response
.rcbDisabled .rcbArrowCell a
{
cursor:no-drop;
}
/* dropdown */
.rcbSlide
{
position:absolute;
overflow:hidden;
display:none;
_height:1px;
float:left;
}
.RadComboBoxDropDown_Response
{
position:absolute;
background:#fff;
border: 1px solid #8b9cac;
cursor:default;
font-size:11px;
text-align: left;
}
.RadComboBoxDropDown_Response_rtl
{
text-align: right;
direction: rtl;
}
.RadComboBoxDropDown_Response
.rcbScroll
{
overflow:auto;
position:relative;
}
.RadComboBoxDropDown_Response
.rcbList
{
list-style:none;
margin:0;
padding:0;
zoom:1;
}
.RadComboBoxDropDown_Response
.rcbHeader,
.RadComboBoxDropDown_Response
.rcbFooter
{
background:#dfeeff;
color:#000;
padding:4px;
}
.RadComboBoxDropDown_Response
.rcbHeader
{
border-bottom: 1px solid #a7c0df;
}
.RadComboBoxDropDown_Response
.rcbFooter
{
border-top: 1px solid #a7c0df;
}
.RadComboBoxDropDown_Response
.rcbNoWrap .rcbItem,
.RadComboBoxDropDown_Response
.rcbNoWrap .rcbHovered,
.RadComboBoxDropDown_Response
.rcbNoWrap .rcbDisabled,
.RadComboBoxDropDown_Response
.rcbNoWrap .rcbLoading
{
white-space:nowrap;
}
.RadComboBoxDropDown_Response
.rcbItem,
.RadComboBoxDropDown_Response
.rcbHovered,
.RadComboBoxDropDown_Response
.rcbDisabled,
.RadComboBoxDropDown_Response
.rcbLoading
{
padding:4px 20px 4px 4px;
border-top: 1px solid #f0f2f3;
min-height: 14px;
}
*
html .RadComboBoxDropDown_Response .rcbItem,
*
html .RadComboBoxDropDown_Response .rcbHovered,
*
html .RadComboBoxDropDown_Response .rcbDisabled,
*
html .RadComboBoxDropDown_Response .rcbLoading
{
height: 14px;
}
.RadComboBoxDropDown_Response_rtl
.rcbItem,
.RadComboBoxDropDown_Response_rtl
.rcbHovered,
.RadComboBoxDropDown_Response_rtl
.rcbDisabled,
.RadComboBoxDropDown_Response_rtl
.rcbLoading
{
padding:4px 4px 4px 20px;
}
.RadComboBoxDropDown_Response
.rcbImage
{
vertical-align: middle;
margin: 0 6px 2px 0;
}
.RadComboBoxDropDown_Response_rtl
.rcbImage
{
margin: 0 0 2px 6px;
}
.RadComboBoxDropDown_Response
em
{
font-style: normal;
font-weight: bold;
}
.RadComboBoxDropDown_Response
.rcbItem em
{
background: #e5e5e5;
}
.RadComboBoxDropDown_Response
.rcbHovered
{
background:#f0f2f4;
color:#000;
border-top: 1px solid #d8dde0;
}
.RadComboBoxDropDown_Response
.rcbSeparator
{
color: #222;
background: #F4F4F4;
}
.RadComboBoxDropDown_Response
.rcbDisabled
{
color:#808080;
cursor:no-drop;
}
.RadComboBoxDropDown_Response
.rcbLoading
{
background:#f0f0f0;
text-align:center;
}
.RadComboBoxDropDown_Response
.rcbMoreResults
{
clear:both;
background:#E0E3E6;
border-top: 1px solid #c7c7c7;
padding:4px;
text-align:center;
}
.RadComboBoxDropDown_Response
.rcbMoreResults a
{
display:block;
width:9px;
height:6px;
background:url('ComboBox/rcbMoreResults.gif') no-repeat transparent;
margin:0 auto 4px;
text-indent:-3333px;
overflow:hidden;
text-decoration:none;
cursor:pointer;
}
.RadComboBoxDropDown_Response
.rcbMoreResults a:hover
{
background-position:0 -6px;
}
.RadComboBoxDropDown_Response
.rcbMoreResults span
{
display:block;
text-align:center;
}
.RadComboBoxDropDown_Response
.rcbScroll
{
scrollbar-face-color: #e9e9e9;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #e9e9e9;
scrollbar-3dlight-color: #dbdbdb;
scrollbar-arrow-color: #787878;
scrollbar-track-color: #f5f5f5;
scrollbar-darkshadow-color: #aeaeae;
}
/*hacks*/
/*Opera start*/
@media
screen and (min-width:550px)
{
.RadComboBoxDropDown_Response_rtl .rcbItem,
.RadComboBoxDropDown_Response_rtl .rcbHovered,
.RadComboBoxDropDown_Response_rtl .rcbDisabled,
.RadComboBoxDropDown_Response_rtl .rcbLoading
{
padding:4px 20px 4px 4px;
zoom:1;
}
}
/*Opera end*/
2 Answers, 1 is accepted
This could happen if you are upgrading from a 2008-version to a more recent one.
The <td> and <a> elements inside the arrow cell are missing their width. You could resolve the problem with such a CSS:
div.RadComboBox .rcbArrowCell td,div.RadComboBox .rcbArrowCell a{ width: 23px;}I hope this helps.
Regards,
Simon
the Telerik team
Rank 1
Hi Simon;
I tried your suggestion and also added !important after the width like this:
div.RadComboBox .rcbArrowCell td,div.RadComboBox .rcbArrowCell a{ width: 23px !important;}This worked!!!
Thanks a lot;
Meera