Bootstrap form-control class problem

[Louis]

Hello,

I have this autocomplete in my view :

@(Html.Kendo().AutoComplete()
        .Name("description.EmplacementEquipementAutreSpecifier")
        .DataTextField("EmplacementEquipementAutreSpecifier")
        .Filter("contains")
        .MinLength(3)
        .HtmlAttributes(new { style = "width:100%;", @class = "form-control" })
        .DataSource(source =>
        {
            source
            .Read(read =>
            {
                read.Action("GetEmplacementEquipementAutreSpecifier", "Description");
            })
        .ServerFiltering(false);
        })
        .Value(Model.description.EmplacementEquipementAutreSpecifier)
        .Events(e => e.Filtering("OnChangeNoEmplacementEquipement").Close("OnChangeNoEmplacementEquipement"))
)

And need to apply a Bootstrap style (class="form-control").  See result in attachment.  

When I remove some style I can see the reason of the missing bottom blue border.  The input box seem a bit lower compare to the thing that make the blue border.

Any suggestion to correct this issue?  Css probably.

 

 

[Martin]

Hello Louis,

Thank you for the provided AutoComplete declaration. Unfortunately, I was not able to reproduce the appearance of the AutoComplete from the screenshot. Custom CSS might be applied to your page that could be overriding default Kendo UI styles and causing the unexpected appearance.

Could you please send me a sample project, in which the issue is reproduced? I will then be able to investigate what is causing it and further assist you with resolving it.

I am looking forward to your reply.

Regards,
Martin
Progress Telerik