How to force a Kendo UI modal window to center in a page? and how to disable all the actions?

Question

I'm trying to display a Kendo UI modal window in the center of the browser, but it keeps showing up at the bottom of the page, by this I mean the only visible part of the window is the top bar, the rest of the window is out of sight, only when you drag it around you can view it properly. I have no styles applied to the div that is being used for the window so I'm confused as to why it's being shown like that.

Also I want to disable all of the action button on the top bar of the window, tried to set an empty action array but a close button is being shown as default, is there a way to just show the title of the window on the top bar? I want the window to disappear when a button in it is clicked.

This is how I'm creating the window:

var accessWindow = $("#accessDiv").kendoWindow({
    actions: [],
    draggable: true,
    height: "300px",
    modal: true,
    resizable: false,
    title: "Access",
    width: "500px"
});

accessWindow.center();
accessWindow.open();

This is my div with only a label, an input and a button, no CSS is being applied to it at the moment:

<div id="accessDiv" style=" width: 100%; height: 100%; background-color: #fff;">
    <label>Enter access key</label>
    <input type="text" />
    <input type="button" title="Enter" value="Enter" />
</div>

score 63 · Accepted Answer · edited Feb 19 '14 at 20:31

63

Have you tried hiding it, then centering and opening it?

var accessWindow = $("#accessDiv").kendoWindow({
 actions: {}, /*from Vlad's answer*/
 draggable: true,
 height: "300px",
 modal: true,
 resizable: false,
 title: "Access",
 width: "500px",
 visible: false /*don't show it yet*/
}).data("kendoWindow").center().open();

from: http://www.kendoui.com/forums/ui/window/kendowindow-center-doesn-t-work-when-inside-an-iframe.aspx

edited Feb 19 '14 at 20:31

zacharydl

4,278
1
29
23

answered May 03 '13 at 22:10

plinkplink

916
1
7
10

2

don't you mean .data('kendoWindow').center().open()? But yeah, this solved the problem, if I want to alter it's position a little bit, how should I do it? – Uriel Arvizu May 03 '13 at 22:13
2

If you know the XY position you might using `accessWindow.wrapper.css({ top: "100px", left: "50px" })`. Remember that you can get the position by doing `accessWindow.wrapper.position()`. Example [here](http://jsfiddle.net/OnaBai/ueYs4/) – OnaBai May 03 '13 at 22:55
Still find it sometimes quirky if I close it and open it again. – Isilmë O. Mar 20 '15 at 14:48

score 9 · Answer 2 · answered May 10 '13 at 11:42

9

The last two lines should read:

accessWindow.data("kendoWindow").center();
accessWindow.data("kendoWindow").open();

answered May 10 '13 at 11:42

jfl

451
3
7

5

Or even accessWindow.data("kendoWindow").center().open(); – Stuart Hallows Aug 13 '13 at 13:52
Did not work in this order for me. Vlad's answer above, where he said to open the window, then center, worked to center my window. – vapcguy Sep 18 '14 at 01:29
@vapcguy, how did you get it to prevent sliding across the window when it opens first, then centers? – Kala J Jan 12 '15 at 22:49
Actually, sorry, looked at it again and I had `accessWindow.data("kendoWindow").center().open();` after all. – vapcguy Jan 16 '15 at 04:22
Not sure if the order is actually important, but the **height** is, so in a scenario when you load content from Ajax, you need to force it to some height otherwise it tries to center something that has no height. – Jeff Jan 22 '16 at 14:37

score 6 · Answer 3 · answered May 03 '13 at 21:57

6

1.You need to swap last two lines of code. First of all you need to open window and then you can center it.

2.To show window without any actions you need to pass empty object:

actions: {}

answered May 03 '13 at 21:57

Vlad Omelyanchuk

3,021
7
29
35

the empty object worked to display no action, but the window keeps being shown at the bottom, I think I need to specify more on this aspect, when I say bottom, I mean you can only see the top bar, the window isn't being shown on the browser, only until you drag it around you can view it. – Uriel Arvizu May 03 '13 at 22:05
Opening the window, then doing `.center()` worked for me. Many THANKS for this piece of info. +1 – vapcguy Sep 18 '14 at 01:28
1

@VladOmelyanchuuk, when I open().center(), I can see my dialog slide across the screen to center itself. How can I prevent this? – Kala J Jan 14 '15 at 16:16

score 0 · Answer 4 · edited Dec 17 '15 at 09:01

The below one works for me. If you don't like it as a modal, set it to false or remove it.

 var window = $("#addBlacklistWind");

   $("#btnAddBlacklist").bind("click", function () {
            window.data("kendoWindow").center().open();
        });

        window.kendoWindow({
            width: "800px",
            title: "Add New Blacklist",
            modal: true,
            visible: false,
            actions: [
                "Maximize",
                "Close"
            ]
        });

How to force a Kendo UI modal window to center in a page? and how to disable all the actions?

4 Answers4