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

Windows not centering correctly

2 Answers 322 Views
Window
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 2
Michael asked on 13 May 2015, 10:17 AM

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

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 May 2015, 03:13 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 2
answered on 15 May 2015, 08:10 AM

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

Tags
Window
Asked by
Michael
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Michael
Top achievements
Rank 2
Share this question
or