Windows not centering correctly

3 posts, 0 answers
  1. Michael
    Michael avatar
    26 posts
    Member since:
    Dec 2010

    Posted 13 May 2015 Link to this post

    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. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 14 May 2015 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Michael
    Michael avatar
    26 posts
    Member since:
    Dec 2010

    Posted 15 May 2015 in reply to Dimo Link to this post

    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

Back to Top