I have a long page with scroll bars. When I open a modal kenoWindow and scroll the page, the window goes off the viewing area. How can I force the window to stay where it is? I thought of making it's position fixed:

div.k-window
{
    position:fixed !important;
}

But if I try to move the window, it jumps down (depending on the scroll position of the page).

Any idea?

I have a long page with scroll bars. When I open a modal kenoWindow and scroll the page, the window goes off the viewing area. How can I force the window to stay where it is? I thought of making it's position fixed:

div.k-window
{
    position:fixed !important;
}

But if I try to move the window, it jumps down (depending on the scroll position of the page).

Any idea?

• javascript
• css
• kendo-ui

• Not sure if I understood your question. Do you want the window to stay in the center or to stay wherever you placed it (the window can be dragged)? – OnaBai Commented Jan 10, 2013 at 0:41
• I want it to stay wherever I placed it. – Mahmood Dehghan Commented Jan 11, 2013 at 3:58

4 Answers 4

There is an easier/better way. The snippet below will center the image on screen and position 20% from the top, even as you scroll:

$('#window').data('kendoWindow').center();

$('#window').closest(".k-window").css({
       position: 'fixed',
       margin: 'auto',
       top: '20%'
    });

Combined with position:fixed you should find it behaves as you are looking for, and with much less code.

I've got it working with re-positioning the window on page scroll event.

var fixedPosWindows = null;
var currentWindowScrollPos;

function FixWindowPos(kwin) {
    if (fixedPosWindows === null) {
        fixedPosWindows = [];
        currentWindowScrollPos = $(window).scrollTop();
        $(window).scroll(function () {
            var top = $(window).scrollTop();
            var diff = top - currentWindowScrollPos;
            for (var i = 0; i < fixedPosWindows.length ; i++) {
                var w = fixedPosWindows[i].parent();
                w.css("top", parseInt(w.css("top"), 10) + diff + "px");
            }
            currentWindowScrollPos = top;
        });
    }
    fixedPosWindows.push(kwin);
}

then I call the function for every window that I want to have fixed position:

var w = $("#window").kendoWindow();
FixWindowPos(w);

if you destroy a window, it will not remove from the array. so if it's a long living page with a lot of windows that are destroyed and recreated, it may have some performance isuues. But in most cases it's not a problem.

Edit: Here is the jsfiddle: http://jsfiddle/mahmoodvcs/GXwfN/

Any better idea?

I've got this solution, but it involves jQuery position

var kendo_wnd = $("#window") .kendoWindow({ title: "Title of Window", modal: true, visible: false, resizable: false, width: 500, open: function (e) { var currentWindow = $(this.element); currentWindow.closest(".k-window").position({ my: "center", at: "center", of: window }).css("position", "fixed"); // Some Code; } }).data("kendoWindow");

I liked KakashiJack's solution, but ended up simplifying it a bit more. Using Kendo's built in center function instead of JQuery's position.

Using the Kendo example at http://docs.telerik./kendo-ui/web/window/overview#initialize-window-center-and-configure-button-click-action

$(document).ready(function(){
    var win = $("#window").kendoWindow({
        height: "200px",
        title: "Centered Window",
        visible: false,
        width: "200px",
        open: function (e) {$(this.element).closest(".k-window").css("position", "fixed")}
    }).data("kendoWindow");
});

$("#openButton").click(function(){
    var win = $("#window").data("kendoWindow");
    win.center();
    win.open();
});