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

Combobox dropdown no displaying

1 Answer 127 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Andrew asked on 04 Jan 2013, 10:21 AM

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{
               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 : 

         <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>
        <div id="pageheader">
            <a href="http://localhost:52617/" title="My Page">
<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>
<div id="main">
    <div id="comboDiv">
        <input id="Combo"/>

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. 




1 Answer, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 04 Jan 2013, 01:11 PM
Never mind, it's sorted now,

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


Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Share this question