Existing styles mis-aligned after library update

[Achilles]

Hi ,

I'm trying to update a ASP .NET application which uses Kendo 2017.2.504 library to 2019.3.1023 by using Visual Studio's Telerik plugin for ASP .NET MVC projects.

The update was seamless. But now some of the padding/margin inside some of the controls seems to have got mis-aligned. Please have a look at the attached pictures before & after the update. I'm using Kendo CDN css & javascript files in my _Layout.chtml file

If I create a new MVC project and use the 2019.3.1023 library to create new screens, this problem is not seen. I tried to walk through the css, but it's very tough to follow. Please let me know how to investigate this problem.

 

Best Regards

 

Achilles

 

[Dimitar]

Hi Achilles,

The described issue is probably related to the styles included in the _Layout.cshtml. In order to troubleshoot the issue I would suggest the following approach:

1) From the provided screenshots I can see that the Kendo Less-based Default theme is being used across the project. Therefore, the first step is to make sure that the kendo.common.css and kendo.default.css stylesheets are referenced in the application _Layout.cshtml. 

2) Make sure that not other kendo.themename.css stylesheets are referenced in the application _Layout.cshtml.

3) Inspect the misaligned DropDownList markup through the browser DOM Inspector and try to identify which styles are causing the issue. The DOM Inspector indicates which stylesheets applies the changes that are affecting the DOM, thus you could try to locate the stylesheet that is causing the problem and investigate it further.

In case the above does not help and the issue continues to persist, you could isolate the issue in a small runnable project and then send it back to me for further review.

I hope this helps. In case you have any additional questions, please let me know.

Regards,
Dimitar
Progress Telerik

[Achilles]

Dear Dimitar,

Thanks for your analysis. As you have suggested, I've created a small run-able project by stripping down my original solution. (Please find attached). Please click on the link called "Index" to go to a grid page . You can see the problem in the drop-down list and the filters

Thank you 

Regards



Achilles

[Dimitar]

Hello Achilles,

Thank you for the sample project provided.

After investigating the Layout.cshtml I noticed that the Kendo UI common stylesheet is referenced two times. Therefore, in order to resolve the issue, you could comment out the following line in the Layout.cshtml:

  @Styles.Render("~/Content/css")

Regards,
Dimitar
Progress Telerik

[Achilles]

Hello Dimitar,

Thanks for your help to identify the double reference. We were able to solve the problem.

Best Regards

Achilles