RadComboBoxDropDown and position problem

4 posts, 0 answers
  1. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 02 Aug 2010 Link to this post

    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
  2. Yana
    Admin
    Yana avatar
    4889 posts

    Posted 02 Aug 2010 Link to this post

    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
  3. maha
    maha avatar
    44 posts
    Member since:
    Jun 2010

    Posted 02 Aug 2010 Link to this post

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

    Posted 05 Aug 2010 Link to this post

    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
Back to Top