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

Uriel Arvizu picture Uriel Arvizu · May 3, 2013 · Viewed 60.1k times · Source

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>

Answer

plinkplink picture plinkplink · May 4, 2013

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