This is a migrated thread and some comments may be shown as answers.

Close button on Kendo window is incorrectly aligned

1 Answer 155 Views
Window
This is a migrated thread and some comments may be shown as answers.
Logan
Top achievements
Rank 1
Veteran
Logan asked on 12 May 2020, 01:42 PM

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)
)

 

 

 

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 14 May 2020, 07:20 AM

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.
Tags
Window
Asked by
Logan
Top achievements
Rank 1
Veteran
Answers by
Martin
Telerik team
Share this question
or