This is a migrated thread and some comments may be shown as answers.

RadComboBoxDropDown and position problem

3 Answers 80 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
maha
Top achievements
Rank 1
maha asked on 02 Aug 2010, 11:24 AM

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

3 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 02 Aug 2010, 12:32 PM
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
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
0
maha
Top achievements
Rank 1
answered on 02 Aug 2010, 02:20 PM
when i posted the page online it worked correctly.I have another question How to make the combo opens on mouseover and not onmouseclick
0
Yana
Telerik team
answered on 05 Aug 2010, 02:26 PM
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
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
Tags
ComboBox
Asked by
maha
Top achievements
Rank 1
Answers by
Yana
Telerik team
maha
Top achievements
Rank 1
Share this question
or