jQWidgets Forums

Forum Replies Created

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 31, 2014 at 10:41 pm in reply to: Docking Persistence Docking Persistence #48752

    vespagym
    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>
    January 9, 2014 at 6:58 pm in reply to: Width 100% Too Wide Width 100% Too Wide #47642

    vespagym
    Participant

    Thanks, Peter. The info about box sizing was very helpful. I was able to get everything in line using the following CSS on the docking div:

    -webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;    
box-sizing: border-box;
    January 8, 2014 at 8:01 pm in reply to: Width 100% Too Wide Width 100% Too Wide #47585

    vespagym
    Participant

    Here’s a bare bones code that illustrates the issue:

    <html>
<head>
<link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="js/jqwidgets/styles/jqx.classic.css" type="text/css" />
<script src="js/jquery/jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script src="js/jqwidgets/jqxcore.js" language="javascript" type="text/javascript"></script>
<script src="js/jqwidgets/jqxdocking.js" language="javascript" type="text/javascript"></script>
<script src="js/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');
});
</script>
</head>
<body>
	<table style="width: 100%; border: 1px solid black;">
		<tr><td>Table1</td></tr>
	</table>
	<div id="docking" style="border: 1px solid black;">
		<div id="col1" style="width: 50%;">
			<div>
				<div>Header1</div>
				<div>Content1</div>
			</div>
		</div>
	</div>
</body>
</html>
    January 6, 2014 at 7:53 pm in reply to: Stretch Winddow about two Columns Stretch Winddow about two Columns #47335

    vespagym
    Participant

    Is there a way to mimic this or other custom layouts with a combination of other components? I tried by simply creating multiple jqxDocking widgets on the page with different div IDs, but there were rendering issues with the second widget.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)