jQWidgets Panel Test

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnavigationbar.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxpanel.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdockpanel.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxsplitter.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdocking.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxexpander.js"></script>
<div id="myApp"></div>

CSS

* {
	box-sizing: border-box !important;
	-moz-box-sizing: border-box !important;
}
body {
    background-color: #ffe;
}
#myApp {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 250px;
    height: 150px;
}

JavaScript

var myPanel = $('<div id="myPanel" style="padding:4px">My Panel</div>');
$('#myApp').append(myPanel);
myPanel.jqxPanel({
    width: '100%',
    height: '100%',
    autoUpdate : true,
});

var widthHeight = myPanel.attr('style');

var content = $('<div></div>');
content.append('<div>'+widthHeight+'</div>');
myPanel.jqxPanel('append', content);