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 :
And my page layout is this :
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
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 }); });<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
1 Answer, 1 is accepted
0
Andrew
Top achievements
Rank 1
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.
Cheers
A
the application had the wrong version of JQuery, using the correct newer version sorted out the problem.
Cheers
A