Close button on Kendo window is incorrectly aligned

[Logan]

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>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.aspnetmvc.min.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)
)

 

 

 

[Martin]

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