Как заставить kendoAutoComplete работать с классом начальной загрузки col-md

Question

У меня есть элемент управления Kendo AutoComplete, и я добавил ссылки на kendo.common-bootstrap.css, которые работали, чтобы сделать его правильным по размеру, но не работали с col-md-10 или любым из этих классов с автозаполнением.

вот скриншот того, как это выглядит прямо сейчас,

и вот как я пытаюсь заставить его выглядеть

Я попытался добавить немного CSS, чтобы он выглядел так, как я хочу, но это не сработало. вот CSS я пытался использовать

    <style>
    .max-size {
        max-width: 100%;
    }
</style>

а вот и сам контроль

    <div class="form-group">
    <label for="acCountries" class="control-label col-md-2" id="lblAdministrationManufacturerCountry"><b>Country</b></label>
    <div class="col-md-10">
        <input id="acCountries" type="text" class="form-control max-size" name="country" />
    </div>
</div>

РЕДАКТИРОВАТЬ Вот код, который я использую для заполнения автозаполнения и самого элемента управления...

    function ShowCountries(countryData) {
    $("#acCountries").kendoAutoComplete({
        dataSource: countryData,
        dataTextField: "dictionaryName",
        dataValueField: "dictionaryItemID",
        animation: false
    });
}

function GetCountriesForAutoComplete() {
    $.ajax({
        type: "GET",
        url: AddURLParam.GetCountriesForAutoComplete + "?id=" + 21,
        contentType: "application/json; charset=utf-8",
        success: function (data, textStatus, jqXHR) {
            ShowCountries(data);
        }
    })
}

Answer 1

Я нашел решение для своего вопроса, решение можно найти по этой ссылке

Настройка ширины автозаполнения Kendo