how to set kendo ui autocomplete width with css?

Question

How can I set the width of an autocomplete using css? I know I can set it up when I set up the width when I declare it, like so.

@(Html.Kendo().AutoComplete().Name("test").HtmlAttributes(new { style="width:400px"}))

But I want to know how to do it in css. I tried the following and it didn't work

 .k-autocomplete .k-header
{
    width: 300px;

}

Answer 1

Simply do this:

.k-autocomplete.k-header {
    width: 300px;
}

Remove the space between CSS class selectors.

Answer 2

Taken from their documentation

var autoComplete = $("#autoComplete").data("kendoAutoComplete");

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

Seems a bit odd that this isn't part of the configuration when you initialize.. maybe that's just me.

Answer 3

For me in 2020, the answer was simply:

.k-autocomplete {
    width: 300px;
}