Windows not centering correctly

[Michael]

Hello,

I have an ASP.NET WebForms application rendering a DataGrid. I need to extend it with a Quick-Edit function and I decided to use a kendo.UI window for this task. I've been using them before in the application without any problems. But on this particular page I can't get it centered correctly. I have no CSS assigned to the div (window). I've tried changeing the location of the div in the markup without any effect.

What happens: I click on the button to open the window and the window scrolls the page down a lot and then pops up the window at the bottom of the visible area. If you are at the bottom of the page, the page also gets scrolled down (into an area not visible/there normally).

This is the declaration of the window:

$(function () {
    dialog_QuickEditUsedBike = $("#dialog_QuickEditUsedBike").kendoWindow({
        title: "",
        actions: [
            "Close"
        ],
        modal: true,
        draggable: true,
        resizable: false,
        visible: false
    });
});

And this is how it is opened: 

dialog_QuickEditUsedBike.data('kendoWindow').center();
dialog_QuickEditUsedBike.data('kendoWindow').open();

The other markup is rather complicated. I'd rather send you login data to the page, so you can take a look at it live, if that is fine with you.

Kind regards,

Krisztian

[Dimo]

Hi Krisztian,

Generally, such problems can be observed if the Window is initialized with a visible:true setting. Since this does not seem to be the case in your scenario, you will need to provide a runnable example for further investigation. We prefer standalone test pages rather than complex applications, but if you are unable to isolate the problem on a standalone page, a live URL can also do the job.

First, please make sure that the Window is initialized only once, i.e. that you are not using the kendoWindow() method somewhere by mistake.

http://docs.telerik.com/kendo-ui/basics/jquery-initialization#duplicate-kendo-ui-widget-initialization

Regards,
Dimo
Telerik

[Michael]

Hi Dimo,

while I was rebuilding the centering logic myself:

var objDialog = $("#dialog_QuickEditUsedBike").closest(".k-window");
objDialog.css({
    top: $(document).scrollTop() + ($(window).height() / 2) - (objDialog.height() / 2),
    left: ($(document).width() / 2) - (objDialog.width() / 2)
});

I saw that the value of $(window).height() was totally wrong. It turned out that the page had a HTML 4 doctype that made the browser switch into QuircksMode. And because of this jQuery could not determine the window's height correctly.

I modified the doctype and the centering is now working correctly with the code above and with the .center() method of the kendo window.

Kind regards,

Krisztian