Kendo dropdown width

Question

Hi can someone tell me how to set width for kendo dropdown? Here is my code sample and it is not working. Anything wrong in that?

$("#div1").kendoDropDownList({
    dataSource: items,
    dataTextField: "Name",
    dataValueField: "Id",
    Width : "250px"
});

Since my answer isn't working for you, please show us your relevant code, namely: JS (this is what you have), CSS and HTML. Additionaly, make a jsFiddle. — Shion, Apr 18 '13 at 13:18

Shion · Accepted Answer · 2013-04-18T09:29:21.300

21

The kendoDropDownList does not have a property width for it's configuration. See here: Kendo Docs

What you can do, is styling the correct class. Since you hopefully do know where your dropdown lies, you can specify the selector so it doesn't apply to all dropdowns.

#myContainer .k-dropdown {
     width: 250px;
}

edited Apr 18 '13 at 09:29

answered Apr 18 '13 at 06:27

Shion

1,499
2
14
29

When I try to apply class, it is applying for all dropdowns – jestges Apr 18 '13 at 09:08
This doesn't change the width of the dropdown popup (ie the popup that opens when you click the dropdown) – Bochu Oct 14 '16 at 17:12
1

It should also change the width of the popup as seen here: http://dojo.telerik.com/eXOce. Is this not the case for you? Maybe open a new question then! :) – Shion Oct 17 '16 at 11:25
Does not work for me. The approach of $("#div1").width(250).kendoDropDownList({.. works fine. – Viktor Nov 09 '22 at 13:30

score 15 · Answer 2 · answered Feb 17 '14 at 07:09

In case you have to give different width to different controls you can follow the below approach for giving the width to the specific control.

$("#div1").width(250).kendoDropDownList({
    dataSource: items,
    dataTextField: "Name",
    dataValueField: "Id",
})

score 12 · Answer 3 · answered Dec 09 '14 at 18:49

If MVC Razor DropDownList HTML helper/wrapper syntax is applied, then you can use method HtmlAttributes to specify the width of dropdown list like:

 @(Html.Kendo().DropDownList()                                                            .Name("myDDL")
.HtmlAttributes(new { style="width:100px" })

Mahib · Answer 4 · 2015-05-05T12:11:22.820

4

You can try this as well;

<script type="text/javascript">
  $(document).ready(function() {
    var kendoDropDown = $('#div1').data('kendoDropDownList');
    kendoDropDown.list.width(250);
  });
</script>

Further documentation can be found here in Telerik's official API reference.

edited May 05 '15 at 12:11

answered Feb 13 '15 at 13:45

Mahib

3,977
5
53
62

score 2 · Answer 5 · answered Aug 14 '16 at 20:33

2

Better to do it with CSS

#div1 {     
    width: 250px;
}

But will work with code

$("#div1").width(250).kendoDropDownList({
    dataSource: items,
    dataTextField: "Name",
   dataValueField: "Id",
})

answered Aug 14 '16 at 20:33

Eric Labashosky

29,484
14
39
32

score 0 · Answer 6 · answered Jun 17 '14 at 14:13

0

To keep the automatic width set by the browser:

$("select").each(function () {
    $(this)
        .width($(this).width())
        .kendoDropDownList();
});

answered Jun 17 '14 at 14:13

Oundless

5,425
4
31
33

score 0 · Answer 7 · answered Aug 27 '17 at 13:58

0

This will work 100% as it has worked for me, I tried the above solution, it did not work for me so I found this on my own :), I hope you all benefit from this

#DivThatContainsTheDropdown .k-combobox{
width: 22em !important;
}

answered Aug 27 '17 at 13:58

Bmuzammil

31
9

Kendo dropdown width

7 Answers7

Linked