How to get kendoAutoComplete to work with bootstrap class col-md

Question

I have a Kendo AutoComplete control, and I added the kendo.common-bootstrap.css references, which worked to make it size right, but its not working with col-md-10 or any of those classes with the autocomplete.

here is a screen shot of what it looks like right now,

and here is how I am trying to get it to look

I tried adding some css to it to make it look how I want it to look but it didn't work. here is the css i tried using

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

and here is the control itself

    <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>

EDIT Here is the code that I am using to populate the autocomplete and the control itself...

    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);
        }
    })
}

Please post a minimal, working example of your code (HTML/CSS/JS) in a Snippet. https://stackoverflow.com/help/mcve — vanburen, Oct 10 '15 at 18:59
@vanburenx, I made an edit and added the code that I use to call the data for the autocomplete and the code for the autocomplete — Chris, Oct 10 '15 at 20:42

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

I found the solution for my question, the solution can be found at this link

Setting Kendo AutoComplete width

edited May 23 '17 at 12:14

Community

1
1

answered Oct 10 '15 at 21:03

Chris

2,953
10
48
118

How to get kendoAutoComplete to work with bootstrap class col-md

1 Answers1