[Solved] RadComboBoxDropDown and position problem

[maha]

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

[Yana]

Hello maha,

Could you please send us a live url where the problem can be observed, because the reason for this can be different?

All the best,
Yana
the Telerik team

[maha]

when i posted the page online it worked correctly.I have another question How to make the combo opens on mouseover and not onmouseclick

[Yana]

Hi maha,

Please try the following approach:

<telerik:RadComboBox ID="RadComboBox1" runat="server" CssClass="openOnMouseOver">
    <Items>
        <telerik:RadComboBoxItem Text="item 1" />
        <telerik:RadComboBoxItem Text="item 2" />
        <telerik:RadComboBoxItem Text="item 3" />
        <telerik:RadComboBoxItem Text="item 4" />
        <telerik:RadComboBoxItem Text="item 5" />
    </Items>
</telerik:RadComboBox>

and also add the following javascript:

<script type="text/javascript">
    function pageLoad() {
        var $ = $telerik.$;
        $('.openOnMouseOver').bind('mouseenter', function(e) {
            $find("<%=RadComboBox1.ClientID %>").showDropDown();
        });
    }
</script>

Best regards,
Yana
the Telerik team