Existing styles mis-aligned after library update

5 posts, 0 answers
  1. Achilles
    Achilles avatar
    60 posts
    Member since:
    Jan 2013

    Posted 29 Nov 2019 Link to this post

    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

     

  2. Dimitar
    Admin
    Dimitar avatar
    700 posts

    Posted 03 Dec 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Achilles
    Achilles avatar
    60 posts
    Member since:
    Jan 2013

    Posted 05 Dec 2019 in reply to Dimitar Link to this post

    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
  4. Dimitar
    Admin
    Dimitar avatar
    700 posts

    Posted 06 Dec 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Achilles
    Achilles avatar
    60 posts
    Member since:
    Jan 2013

    Posted 09 Dec 2019 in reply to Dimitar Link to this post

    Hello Dimitar,

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

    Best Regards

    Achilles

Back to Top