Hiding input wrappers

Using jQuery and KendoUI to present a nice ui for the user where the ui only shows up once the user mouses over a control or it has focus!

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="testWindow">
    <span style="font-size: 10pt">
    Why does the window maximize too large for the browser window?<br>
    The text [test text area] will disappear off the screen when maximized.
    <br><br> also, why do the top and left positions not work?
    </span>
    
    <div style="position: absolute; bottom: 0px; right: 0px;">
        [test text area]
    </div>
</div>

JavaScript

$(document).ready(function () {
    $('#testWindow').kendoWindow({ 
        top: 50, 
        left: 50,
        width: 400,
        height: 150,
        actions: ['Maximize']
    });
});