MVC 4 app converted to Kendo UI, AutoComplete and ComboBox lists display over textbox

[Stuart]

I have an existing MVC 4 app and am adding Kendo UI for ASP.NET MVC to it. When I convert the project, then the list on AutoComplete and ComboBox controls displays on top of the textbox, so the user can't see what she's typing in the textbox. For comparison, if I create a new Kendo UI for MVC Application selecting MVC 4 [0], see "Success Path" below, then the list displays below the textbox as expected.

Here are steps to reproduce both the failing and successful path. I've stared at and compare the two, and can't figure out how to make a converted MVC 4 app work correctly. Maybe I am overlooking something obvious. We're far enough into the web app that we need to convert it to use Kendo UI: starting over with a new project to get this to work is not attractive at all.

Failure path
In Visual Studio 2012, select File | New | Project | ASP.NET MVC 4 Web Application, enter a Name, select OK.
In the New ASP.NET MVC 4 Project window, for the project template select Internet Application, for the view engine select Razor, and uncheck the Create unit test project checkbox. Select OK.
In the Solution Explorer, right-click on the project and select Kendo UI for ASP.NET MVC | Convert to Kendo UI for ASP.NET MVC Application.
In the Project Configuration Wizard, select Next | Finish.
In Views | Home | Index.cshtml, add the following:

<p>
   @( Html.Kendo().AutoComplete().Name( "AutoComplete1" ).BindTo( new string [] { "aardvark", "absolute", "abstract" } ) )
</p>

In Views | Shared | _Layout.cshtml, comment out the following lines near the bottom of the file:

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

Compile and run. Type 'a' in AutoComplete and list displays on top of the textbox, completely hiding the user input in the textbox.


Successful path
In Visual Studio 2012, select File | New | Project | Kendo UI for MVC Web Application, enter a Name, select OK.
In the Project Configuration Wizard, select Target = ASP.NET MVC 4, View Engine = Razor, and default everything else.
Select Next | Finish.
In Views | Home | Index.cshtml, add the following:

<p>
    @( Html.Kendo().AutoComplete().Name( "AutoComplete1" ).BindTo( new string [] { "aardvark", "absolute", "abstract" } ) )
</p>

Compile and run. Type 'a' in AutoComplete and list correctly displays below the textbox.


----
[0] As an aside, I really wish the Kendo UI for MVC Application project template using MVC 4 were based on the ASP.NET MVC 4 templates that shipped with VS2012. They look like slightly updated ASP.NET MVC 3 templates.

[Andrey]

Hello Stuart,

Thank you for contacting us.

The issue you are experiencing can be avoided by removing the following code from the default Site.css file:

body {
    background-color: #fff;
    border-top: solid 10px #000;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

Site.css contains selectors and styles that would normally not be used in this way in a real web application, exactly because various problems are likely to occur. I will quote a colleague's statement from another support thread:

Frankly speaking, I think that inserting styles with global selectors is not a smart thing to say the least. My only explanation for that is that the Site.css stylesheet is simply an example for (very) temporary use.

Our current policy with regard to this file is not to invest too much effort in overriding and fixing the visual glitches it triggers, for the following reasons:

- the Site.css file is not used for applications in production state
- the overrides will make our own stylesheets larger and more complex
- Kendo UI can be used with various server platforms and IDEs, where this Site.css file is not present

Let me know if that helps.

Kind regards,
Andrey
the Telerik team

[Lukasz]

Had similar problem. I needed to add this to:

http://www.kendoui.com/forums/ui/grid/menus-not-fully-closing-in-chrome.aspx#2311444