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

Window position again

2 Answers 885 Views
Window
This is a migrated thread and some comments may be shown as answers.
T.
Top achievements
Rank 1
T. asked on 21 Feb 2013, 08:20 AM
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!





2 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 21 Feb 2013, 04:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
T.
Top achievements
Rank 1
answered on 22 Feb 2013, 09:59 AM
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 });
    }
 
});
Tags
Window
Asked by
T.
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
T.
Top achievements
Rank 1
Share this question
or