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

Combobox dropdown no displaying

1 Answer 178 Views

ComboBox

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

Andrew asked on 04 Jan 2013, 10:21 AM

BadDropdown.PNG

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 id="main">

<h2>Test</h2>

<div id="comboDiv">

<input id="Combo"/>

</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

Combobox dropdown no displaying

1 Answer, 1 is accepted