jQWidgets Forums

January 31, 2014 at 10:41 pm Docking Persistence #48752

Participant

I’m trying to get the columns rendered correctly when the panels have been moved around. I’ve swapped the top two panels and when the page is refreshed the right column shifts below the left column. If cookies are used instead of importLayout, the page renders correctly with two columns. Does anyone know the reason?

The panels should render in two columns as
TR|TL
BL|

but they render as:
TR
BL
TL

<html>
<head>
<link rel="stylesheet" href="js50/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="js50/jqwidgets/styles/jqx.classic.css" type="text/css" />
<script src="js50/jquery/jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script src="js50/jqwidgets/jqxcore.js" language="javascript" type="text/javascript"></script>
<script src="js50/jqwidgets/jqxdocking.js" language="javascript" type="text/javascript"></script>
<script src="js50/jqwidgets/jqxwindow.js" language="javascript" type="text/javascript"></script>
<script>
$(document).ready(function () {
    $('#docking').jqxDocking({ width: '100%', theme: 'classic', orientation: 'horizontal', mode: 'docked' });
    $('#docking').jqxDocking('showAllCollapseButtons');
    $('#docking').jqxDocking('hideAllCloseButtons');
    $('#docking').jqxDocking('importLayout', '{"panel0": {"windowTr":{"collapsed":false},"windowBl":{"collapsed":false}},"panel1": {"windowTl":{"collapsed":false}},"floating":{},"orientation": "horizontal"}');
});
</script>
</head>
<body>
	<div id="docking">
		<div style="width: 50%">
			<div id="windowTl">
				<div>Top Left</div>
				<div id="toggleTl" style="height:310px;display:block;overflow:auto"></div>
			</div>
			<div id="windowBl">
				<div>Bottom Left</div>
				<div id="toggleBl" style="height:150px;display:block;overflow:auto"></div>
			</div>
		</div>
		<div style="width: 50%">
			<div id="windowTr">
				<div>Top right</div>
				<div id="toggleTr" style="height:310px;display:block;overflow:auto"></div>
			</div>
		</div>
	</div>
</body>
</html>