When i click on the combobox to show the items the box list opens in a different location and not under the box.
This is the skin am using :
/* RadComboBox Simple skin */
/*global*/
.RadComboBox_comboSkin,
.RadComboBox_comboSkin .rcbInput,
.RadComboBoxDropDown_comboSkin
{
font-family:Tahoma;
font-size:8pt;
color: white;
text-align:center;
font-weight:bold;
}
/* combobox */
div.RadComboBox_comboSkin table td.rcbInputCell
{
height:25px;
line-height: 25px;
BACKGROUND-IMAGE: url('ComboBox/list-bg.png');
BACKGROUND-COLOR: transparent;
BACKGROUND-REPEAT: no-repeat;
text-align:center;
}
* html div.RadComboBox_comboSkin table td.rcbInputCell
{
height /**/: 25px;
line-height /**/: 25px;
text-align:center;
}
div.RadComboBox_comboSkin table td.rcbInputCellLeft { border-width: 1px 0 1px 1px; }
div.RadComboBox_comboSkin table td.rcbInputCellRight { border-width: 1px 1px 1px 0; }
div.RadComboBox_comboSkin table td.rcbArrowCell
{
border: none;
background: #fff url('ComboBox/cursor-bg.png') no-repeat -1px 50%;
text-align:center;
}
div.RadComboBox_comboSkin .rcbReadOnly .rcbArrowCellLeft,
div.RadComboBox_comboSkin .rcbArrowCellHidden.rcbArrowCellLeft { border-width: 1px 0 1px 1px; }
div.RadComboBox_comboSkin .rcbReadOnly .rcbArrowCellRight,
div.RadComboBox_comboSkin .rcbArrowCellHidden.rcbArrowCellRight { border-width: 1px 1px 1px 0; }
.RadComboBox_comboSkin td.rcbArrowCell {
}
.RadComboBox_comboSkin .rcbHovered .rcbArrowCell {
}
.RadComboBox_comboSkin .rcbFocused .rcbArrowCell {
}
.RadComboBox_comboSkin .rcbDisabled .rcbArrowCell { }
.RadComboBox_comboSkin .rcbReadOnly td.rcbArrowCell { }
.RadComboBox_comboSkin .rcbHovered .rcbReadOnly .rcbArrowCell { }
.RadComboBox_comboSkin .rcbFocused .rcbReadOnly .rcbArrowCell { }
.RadComboBox_comboSkin .rcbDisabled .rcbReadOnly .rcbArrowCell { }
.RadComboBox_comboSkin td.rcbArrowCellHidden,
.RadComboBox_comboSkin .rcbHovered td.rcbArrowCellHidden,
.RadComboBox_comboSkin .rcbFocused td.rcbArrowCellHidden,
.RadComboBox_comboSkin .rcbReadOnly td.rcbArrowCellHidden,
.RadComboBox_comboSkin .rcbHovered .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_comboSkin .rcbFocused .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_comboSkin .rcbDisabled .rcbReadOnly .rcbArrowCellHidden,
.RadComboBox_comboSkin table.rcbDisabled td.rcbArrowCellHidden { }
.RadComboBox_comboSkin .rcbHovered .rcbArrowCell,
.RadComboBox_comboSkin .rcbHovered .rcbReadOnly .rcbInputCell,
.RadComboBox_comboSkin .rcbHovered .rcbReadOnly .rcbArrowCellHidden { }
.RadComboBox_comboSkin .rcbFocused .rcbArrowCell,
.RadComboBox_comboSkin .rcbFocused .rcbReadOnly .rcbInputCell,
.RadComboBox_comboSkin .rcbFocused .rcbReadOnly .rcbArrowCellHidden { }
div.RadComboBox_comboSkin .rcbHovered .rcbArrowCell,
div.RadComboBox_comboSkin .rcbHovered .rcbInputCell { border-color: #E4E4E4; }
div.RadComboBox_comboSkin .rcbFocused .rcbArrowCell,
div.RadComboBox_comboSkin .rcbFocused .rcbInputCell {}
div.RadComboBox_comboSkin .rcbDisabled .rcbArrowCell,
div.RadComboBox_comboSkin .rcbDisabled .rcbInputCell { }
div.RadComboBox_comboSkin .rcbArrowCell a
{
height: 25px;
}
div.RadComboBox_comboSkin td.rcbArrowCellHidden,
div.RadComboBox_comboSkin .rcbArrowCellHidden a
{
width: 1px;
}
div.RadComboBox_comboSkin td.rcbArrowCellHidden.rcbArrowCellRight
{
border-left: 0;
}
/* Read-only styles */
/* dropdown */
.RadComboBoxDropDown_comboSkin
{
background: #fff;
}
.RadComboBoxDropDown_comboSkin .rcbHeader,
.RadComboBoxDropDown_comboSkin .rcbFooter
{
background: #e4e4e4;
color: #000;
}
.RadComboBoxDropDown_comboSkin .rcbHeader
{
}
.RadComboBoxDropDown_comboSkin .rcbFooter
{
}
.RadComboBoxDropDown_comboSkin .rcbItem em
{
}
div.RadComboBoxDropDown_comboSkin .rcbHovered
{
}
.RadComboBoxDropDown_comboSkin .rcbSeparator
{
}
.RadComboBox_comboSkin .rcbDisabled .rcbInputCell .rcbInput,
.RadComboBoxDropDown_comboSkin .rcbDisabled
{
}
.RadComboBoxDropDown_comboSkin .rcbLoading
{
}
.RadComboBoxDropDown_comboSkin .rcbMoreResults
{
}
.RadComboBoxDropDown_comboSkin .rcbMoreResults a
{
text-align:center;
}
DIV.RadComboBox_comboSkin .rcbInputCell {
BACKGROUND-IMAGE: url('ComboBox/list-bg.png');
BACKGROUND-COLOR: transparent;
BACKGROUND-REPEAT: no-repeat;
text-align:center;
}
DIV.RadComboBox_comboSkin .rcbInput {
FONT-FAMILY: tahoma;
COLOR: #FFFFFF;
FONT-SIZE: 8pt;
text-align:center;
}
DIV.RadComboBox_comboSkin .rcbArrowCell {
BACKGROUND-IMAGE: url('ComboBox/cursor-bg.png');
BACKGROUND-COLOR: transparent;
BACKGROUND-POSITION: -1px 80px;
COLOR: #003300;
FONT-SIZE: 8pt;
FONT-FAMILY: tahoma;
text-align:center;
}
DIV.RadComboBox_comboSkin .rcbHovered .rcbInputCell {
BACKGROUND-COLOR: transparent;
text-align:center;
}
DIV.RadComboBox_comboSkin .rcbHovered .rcbArrowCell {
BACKGROUND-COLOR: transparent;
COLOR: #FFFFFF;
text-align:center;
}
DIV.RadComboBoxDropDown_comboSkin {
BORDER-LEFT: 0px solid;
BACKGROUND-COLOR: #CCCCCC;
text-align:center;
}
DIV.RadComboBoxDropDown_comboSkin .rcbItem {
BACKGROUND-COLOR: #526b75;
FONT-FAMILY: tahoma;
COLOR: #FFFFFF;
FONT-SIZE: 8pt;
text-align:center;
}
DIV.RadComboBoxDropDown_comboSkin .rcbHovered {
}
and :
<
telerik:RadComboBox ID="RadComboBoxSearch" runat="server" Width="138px" EnableEmbeddedSkins="false" Font-Size="8pt" Font-Names="tahoma" ForeColor="White" skin="comboSkin" />
what is the problem?I want it appear directly under the box