Kendo UI MVVM Dropdownlist - dropdown list wider than control itself

0
votes

I have a Kendo UI MVVM dropdownlist, and I want the width of the list to be wider than the control itself.

<input class="dropDowns" data-role="dropdownlist" style="width: auto;" />

I found an solution: Kendo UI Dropdown, making the drop down panel wider than the control But I can't apply this to my MVVM example.

2
mvvmkendo-ui
What did you attempt? Why can't you use a simple CSS rule to do this for you? – Brett
I haven't really attempted anything other that setting the style of the width - which makes the whole control bigger. Maybe there is a way to use a simple CSS rule, but if so, I don't know what it would be. I guess I also tried to give the input and ID of dropdown and use this: dropdown.list.width(400); but list is undefined. – seabass2020

2 Answers

0
votes

Apparently you can't set the list width based on the class, you have to give it an id.

<input id="dropDowns" data-role="dropdownlist" style="width: auto;" />

Then the jQuery:

$("#dropDowns").data("kendoDropDownList").list.width(400);
0
votes

Another possible solution without using the Id

$("[data-role=dropdownlist]").each(function () {
  $(this).data("kendoDropDownList").list.width(300);
});