Kendo UI drop-down list is the largest option

Question

var ddlViews = $('#ddlViews').data("kendoDropDownList"); ddlViews.list.width("auto"); 

I added that the width will be automatic, but it doesn’t work, also the width of the popup window gets the maximum width of the selected item and overflows out of the box. I want the drop-down list to have a fixed width, but the drop-down list items should show the content on one line. Since the normal drop down menu will work.

Answer 1

 .k-dropdown { max-width:10em !important; } 

Add them to your CSS and it will work, the width will be the maximum width that you want to specify so that the drop-down list has this maximum width, while the contents / elements would be on the same line.

An important property forcibly adds the style you would like to have. It also overrides the width computed by kendo.

Thanks for answering.

Hope this helps! Time

Answer 2

 .k-list-container{ min-width:126px !important;//give a min width of your choice width: auto!important; } .k-list { width:auto !important; } 

link to js violin

Answer 3

We can set the width in two ways for the width of the list of Kendo UI list lists.

Answer-1 * For the static method *

 // get reference to the DropDownList var dropdownlist = $("#size").data("kendoDropDownList"); // set width of the DropDownList dropdownlist.list.width(500); 

Answer -2 Dynamic path using css

  .k-list-container { white-space: nowrap !important; width: auto!important; overflow-x: hidden !important; min-width:243px !important; } .k-list { overflow-x: hidden !important; /*overflow-style: marquee;*/ overflow-y: auto !important; width:auto !important; } 

This css code will work in dynamic load.

Answer 4

Follow this answer to set the width in the dropdown list: Kendo

 .k-dropdown { width: 250px; } 

Answer 5

kendo now fully supports this, with the autoWidth option

 <input id="dropdownlist" style="width: 100px;" /> <script> $("#dropdownlist").kendoDropDownList({ autoWidth: true, dataSource: { data: ["Short item", "An item with really, really long text"] } }); </script> 

Answer 6

To set a fixed width for the drop-down list (list only) use

  ddlViews.list.width(200); 

To set a fixed width for a drop-down list, whether the list is active or not, define the width in css as

 <select id="ddlViews" style="width:200px;" > <option></option> </select> 

I managed to show the contents of the options on one line through css as

 ddlViews.list.css("white-space","nowrap");