Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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> 
like image 271
Uriel Arvizu Avatar asked May 03 '13 21:05

Uriel Arvizu


People also ask

How do you center a kendo window?

I used Kendo Window Activate event to center the window. If you are using Kendo Grid inside Kendo Window then you have to make sure that centerKendoWindow() dose not fire before the data is bound to the grid. if this is the case then you can use Kendo Grid DataBound event to center the window.

How do I close a kendo window?

Basically you already know how to close the window - you need to do it with the close method of its API. $("#window"). data("kendoWindow"). close();


1 Answers

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

like image 121
plinkplink Avatar answered Sep 24 '22 21:09

plinkplink