CODEWITHSUNDEEP
csskendo-ui
Matt
Matt

Reputation: 26971

Kendo UI Dropdown, making the drop down panel wider than the control

In a Kendo UI Dropdown, is it possible to make the drop down panel wider than the control?

Upvotes: 5

Views: 4215

Answers (5)

BGTurner
BGTurner

Reputation: 325

you can set this directly when defining the control with:

.AutoWidth(true)

i.e.

@(Html.Kendo().DropDownList()
  .Name("ddl")
  .DataTextField("Text")
  .DataValueField("Value")
  .AutoWidth(true)
  .BindTo(Model.list))

Upvotes: 0

OnaBai
OnaBai

Reputation: 40897

If the id of the dropDownList is drop, you need to define a CSS style as:

#drop-list { 
    width: 300px !important;
}

for overwriting KendoUI computed width and set it to (in this example) 300px.

Upvotes: 2

seabass2020
seabass2020

Reputation: 1123

Another possible solution:

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

Upvotes: 0

Vlad
Vlad

Reputation: 51

Actually, there's a command for that:

$("#idOfMyDropDownList").data("kendoDropDownList").list.width("auto");

Upvotes: 2

sasheto
sasheto

Reputation: 541

Another possible approach:

var dropdownlist = $("#titles").data("kendoDropDownList");

// set width of the drop-down list
dropdownlist.list.width(400);

Code snippet is taken from the official examples (link).

Upvotes: 6

Related Questions