Create DropDownLists with Long Items
Environment
| Product | Progress® Kendo UI® DropDownList for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I render long items by showing just a part of them and keeping the current width of the DropDownList widget?
Solution
The following example demonstrates how to create a Kendo UI DropDownLists with long items.
<div id="div">
<select id="ddl">
<option>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</option>
<option>item 2</option>
<option>item 3</option>
</select>
</div>
<script>
$("#ddl").kendoDropDownList().parent().css("width", "100%");
</script>
<style>
html { font: 12px sans-serif; }
#div { width: 300px; }
.k-list-container .k-item {
white-space: nowrap;
float: left;
clear: left;
min-width: 100%;
box-sizing: border-box;
}
</style>