Window position again

[T.]

Hi,

I have a problem positioning a Kendo UI window. I want the window appear horizontally centered on the screen and vertically 100px from top, this is the code for my window (inside $(document).ready(function ()):

var kendoDlg = $('<div id="dlg"/>').kendoWindow({

        minWidth: 350,

        maxWidth: 350,

        title: "Info",

        resizable: false,

modal: true

         

});

$('#dlg').parent().addClass("infoDialog");

kendoDlg.data("kendoWindow")
 .content(div)
 .center().open();



I added a class 'infoDialog' to it's parent to modify the styles by css.

The css is here:

.k-widget.k-window.infoDialog {

    top: 100px !important;

}

If I visit my page now, the window appears exactly where I wanted to. The problem now is the window can only be dragged/ moved horizontally but not vertically anymore, it sticks at the 100px horizontal position.
How can I position the window using css and keep the possibility to move it where I want to?

I saw in other post following code:

$("#dlg").closest(".k-window").css({

    top: 55,

    left: 450

});

If I place this code after the line

$('#dlg').parent().addClass("infoDialog");

it does not do anything. If I place it after the call to .open(), then the window appears at center of the screen and moves / animates up to position 100px from top, but this is now what I want. I want the window appear immediately at 100px from top.

How I can do that? Why there is no property top, left for the window widget to keep things simple?

Thanks for any help!

[Dimiter Madjarov]

Hello Timon,

 
You could bind to the open event of the Window and set the CSS styles there.

E.g.

function onOpen(e) {
   this.wrapper.css({ top: 100 });
}

This way the styles will be set initially and the window will still be draggable in all directions.

All the best,
Dimiter Madjarov
the Telerik team

[T.]

Hi Dimiter,

thanks that worked for me, here is how it looks like now:

var kendoDlg = $('<div id="dlg"/>').kendoWindow({

        minWidth: 350,

        maxWidth: 350,

        title: title,

        resizable: false,

           modal: true,               

 

        open: function (e) {

            this.wrapper.css({ top: 100 });

    }

 

});