New to Kendo UI for jQuery? Download free 30-day trial

Create DropDownLists with Long Items


Product Progress® Kendo UI® DropDownList for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I render long items by showing just a part of them and keeping the current width of the DropDownList widget?


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>
    $("#ddl").kendoDropDownList().parent().css("width", "100%");
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;

See Also

In this article