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

Reposition Modal window on scrolling

5 Answers 669 Views
Window
This is a migrated thread and some comments may be shown as answers.
Avin
Top achievements
Rank 1
Avin asked on 12 Mar 2012, 10:54 AM
Hello,
I have a page with many controls on the page. On a click of button a window opens in a modal form. But there is a scrollbar on the page. On scrolling , the modal kendo window  moves below the page. I want it in center with the movement of scrollbar. Here is the code i am using.

$(

"#openButton").click(function () {  

var window1 = $("#window").kendoWindow({ 
content: "Test.html"
title: " Window Content"
modal: true });  

var window = $("#window").data("kendoWindow"); 
window.center();
window.open(); });

Thanks in advance.

5 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 12 Mar 2012, 02:01 PM
Hello Avin,

This functionality is not supported out of the box. You can implement it by binding an event handler to the scroll event and moving the window, or by making the window use fixed positioning, through CSS (position: fixed).

All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dave
Top achievements
Rank 1
answered on 13 Nov 2012, 04:27 PM
Can somebody get this to work by setting position: fixed? I've tried this in several ways but I always get some kind of graphical glitch from the window.

This should really be out-of-the-box functionality. Modals should remain at the center of a screen at all times, shouldn't they?

Any help with this would be greatly appreciated!
0
Vladimir Iliev
Telerik team
answered on 16 Nov 2012, 04:06 PM
Hi David,

 
Basically you can use the jQuery CSS method to apply the CSS position property to fixed. Please check the example below:

var window = $("#window");
window.kendoWindow({
    width: "600px",
    title: "About Alvar Aalto",
    close: onClose
});
//Make the window fixed position
window.parent().css("position", "fixed");

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dave
Top achievements
Rank 1
answered on 16 Nov 2012, 04:10 PM
That did the trick! I didn't think it would be that simple. Thank you!
0
Dave
Top achievements
Rank 1
answered on 16 Nov 2012, 04:14 PM
I'd like to add that this solution causes Kendo Window to drop vertically a bit when trying to click & drag the window by the Title bar in IE8. You can still drag it around, but the window is a few centimeters below the mouse pointer. Potentially a bug?

Regardless, this will have to do. Thanks again!
Tags
Window
Asked by
Avin
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Dave
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or