Kendo Autocomplete how to disable default css style

Question

I have styled form inputs using Twitter Bootstrap.

I need to add Kendo autocomplete input, but problem is that each initialized autocomplete input overrides my CSS styles for input (See image below). Left input is styled using Kendo Autocomplete, Input on the right is styled by Bootstrap.

Is any possibility to disable Kendo input styling of the input in form?

enter image description here

Thanks for any help.

Just use firebug to find element and override that kendo class, i think that is faster solution — Miomir Dancevic
Yes, it's possible. Use !important on your own styles where necessary. — Brett
Or just delete 'k-input' class from input after widget is rendered. — Jarosław Kończak
@Brett: I would consider this bad practice, just because if you need to style one particular type of inputs other than the !important ones, it will get pretty tricky, not impossible, but a problem you would not have if you do it the way Miomir Dancevic suggested. — Kevkong

Devanathan.S Devanathan.S · Accepted Answer · 2017-05-05T06:24:50

I also faced this problem, find the solution below.

<style type="text/css">
/*The below is to remove the css for the autocomplete control - Job Title */
        .autocomplete {
            display: inline-block !important;
            border: 0 !important;
            background: none !important;
            box-shadow: none !important;
        }
</style>

Your control initialization

$("#title").kendoAutoComplete({
                    dataSource: data.Sample,
                    dataTextField: "title_Cd",
                    filter: "startswith"
                }) .parent()
                    .addClass('autocomplete');

Thats it..

Thanks Dev

Kendo Autocomplete how to disable default css style

1 Answers