Window not centering on long form
by grippstick
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id='container'>
<div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div data-bind='style:{height:getDivHeight,border:getBorder}'>
<button data-bind='click:showWindow,text:getText'></button>
</div> <div...
CSS
.border {
display: block;
height: 30px;
background: black
}
JavaScript
var viewModel = new kendo.observable({
getBorder: 'solid',
getDivHeight: '3000px',
getText: function () {
return new Date().getTime();
},
showWindow: function () {
viewModel.showUrlWindow({title:'fred',message:'<div>HELLO</div>'});
},
showUrlWindow: function (options) {
var idBase = new Date().getTime();
options = $.extend({}, { "title": "Confirm",
"message": "Click OK to continue.",
showClose: null,
classes: null,
"buttons": [{ "title": "OK", "callback": null}]
}, options);
//wrap in <p> if text only
var regex = /(<([^>]+)>)/ig;
if (options.message.search(regex) < 0) {
options.message = '<p>' + options.message + '</p>'
}
var content = "<div class='k-content kendo-confirm'> <div class='dialogMessage'>" + options.message + "</div>";
content += "</div>";
var height = options.height;
var width = options.width;
// window not yet initialized
var kendoWindow = $("<div class='radolodDialog' id='" + idBase + "'/>").kendoWindow({
title: options.title,
resizable: false,
modal: true,
height: height,
width: width,
activate: function () {
//only use this center if we do not have a height and width
if (!width || !height) {
this.center();
}
},
deactivate: function () {
//lets make sure we get rid of the whole thing
this.element.closest(".k-window").remove();
}
...