Close button on Kendo window is incorrectly aligned

2 posts, 0 answers
  1. Logan
    Logan avatar
    61 posts
    Member since:
    Apr 2013

    Posted 12 May 2020 Link to this post

    The close x on all of my kendo windows is not correctly aligned with the title. 

     

    See screenshot of example and computed css at at https://imgur.com/a/unB1XOs 

     

    All of my css is loaded here:

    <script src="~/lib/jquery/dist/jquery.js"></script>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/lib/sweetalert2/dist/sweetalert2.css" />
    <link rel="stylesheet" href="~/lib/toastr.js/toastr.min.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/css/web/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/css/web/kendo.bootstrap-v4.min.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui/css/web/kendo.bootstrap.mobile.min.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

     

     

    This is happening with all of my kendo windows, but one example of how i create the example:

    @(Html.Kendo().Window()
                .Name("FaqWindow")
                .Actions(a => a.Close())
                .Draggable(true)
                .Visible(false)
                .Title("FAQ")
                .Modal(true)
                .Resizable()
                .Width(800)
                .Height(600)
    )

     

     

     

  2. Martin
    Admin
    Martin avatar
    297 posts

    Posted 14 May 2020 Link to this post

    Hello Logan,

    Thank you for the provided code snippets.

    The most probable reason for the icon misalignment is the usage of a common CSS file (common-bootstrap.min.css, which is the common stylesheet for kendo.boostrap-v3 LESS-based theme) along with the Boostrap SASS theme. If you wish to use the boostrap-v4 theme, you only need to reference the kendo.boostrap-v4.min.css stylesheet and remove the kendo.common-boostrap. For further information please refer to our Styles and Appearances section. Apart from that, there might be some CSS in the other stylesheets that are loaded that is overriding the correct position of the close icon.

    If the above does not help you to resolve the problem, please send me a runnable project where I can observe the issue. I will then be glad to assist you.

    Looking forward to your reply.

    Regards,
    Martin
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top