Combobox dropdown no displaying

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    2 posts
    Member since:
    Dec 2012

    Posted 04 Jan 2013 Link to this post

    Hi,

    basically I have a combo box with about 100 entries in it upon which the dropdown is not visible when you click on it, this happens in all browsers.

    I have tracked the issue down to the "top" css property on the div with the class "k-animation-container" (the div which ends up containing the dropdown list). It seems that when I click on my comboBox the top property gets set to -10000px.

    here is my code for creating the comboBox : 

    $(document).ready(function () {
     
               // Create Data Source
               var individualDataSource = new kendo.data.DataSource({
                   transport: {
                       read: {
                           url: "/Individual/JsonDataList/",
                           dataType: "json"
                       }
                   },
                   serverFiltering: true,
                   schema: {
                       model: {
                           fields: {
                               Id: { type: "number" },
                               Display: { type: "string" }
                           }
                       }
                   }
               });
     
               // Create Combo Box
               $('#Combo').kendoComboBox({ filter: "contains",
                   suggest: true,
                   placeholder: "Select Individual",
                   dataTextField: "Display",
                   dataValueField: "Id",
                   dataSource: individualDataSource
               });
     
           });
    And my page layout is this : 

    <html>
    <head>   
             <link id="favicon" rel="shortcut icon" href="http://localhost:52617/Content/favicon.ico"  />
        <link href="http://localhost:52617/Content/style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="http://localhost:52617/Content/print.css" rel="stylesheet" type="text/css" media="print" />
        <link href="http://localhost:52617/Content/redmond/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
        <link href="http://localhost:52617/Content/kendo.common.min.css" rel="stylesheet" type="text/css"/>
        <link href="http://localhost:52617/Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://localhost:52617/Scripts/CombinedScripts.aspx"></script>
        <script type="text/javascript" src="http://localhost:52617/Scripts/kendo.web.min.js"></script>
        <script type="text/javascript" src="http://localhost:52617/Scripts/kendo.aspnetmvc.min.js"></script>
      
    </head>
    <body>
            <div id="pageheader">
                <a href="http://localhost:52617/" title="My Page">
            </div>
    <div id="menucontainer">        
       <div id="MenuItems">
           <ul class="menu">
               <li>Main Menu</li>
               <li><a href="http://localhost:52617/account/logon">Log On</a></li>
           </ul>
       </div>
    </div>
    <div id="main">
        <h2>Test</h2>
        <div id="comboDiv">
            <input id="Combo"/>
        </div
     </div>  
    </body>
    </html>

    I am using Kendo UI v2012.3.1114 (JQuery is included in my combinedScripts.aspx)

    I have also included a screenshot of the dropdown in action.

    Any help with this would be much appreciated. 

    A

     

     
  2. Andrew
    Andrew avatar
    2 posts
    Member since:
    Dec 2012

    Posted 04 Jan 2013 Link to this post

    Never mind, it's sorted now,

    the application had the wrong version of JQuery, using the correct newer version sorted out the problem.

    Cheers

    A
  3. Kendo UI is VS 2017 Ready
Back to Top