[fusion-users] Nested JxSplitters which don't want to work

Fri Dec 12 06:56:17 EST 2008

Hi everybody,

I have a blocking problem with Jx and its Splitters.
I want the split horizontaly the page in 2 parts and split the second parts
verticaly in 2.
But when I load this simpliest code (this html file is wel located in a
fusion template folder with all required xml/css/images (I use a copy of
"Slate")), I see only the "Si" DIV (the green one).

-------------------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../../../lib/fusion.js"></script>

<script type="text/javascript">
var main;
window.onload = function() {

  main = new Jx.Layout('AppContainer', {left: 0, right: 0, top: 2, bottom:
0});
  var sa1 = new Jx.Layout('SplitterArea', {left: 2, right: 2, top: 2,
bottom: 2}); 
  var si = new Jx.Layout('Si', {});
  var sa2 = new Jx.Layout('SplitterArea2', {});
  var ma = new Jx.Layout('Ma', {});
  var de = new Jx.Layout('De', {});

  /* SPLITTER 1 */

  var splitter = new Jx.Splitter('SplitterArea',
                                 {splitInto:2,
								 elements: [$('Si'), $('SplitterArea2')],
                                 layout:'horizontal',
								 containerOptions: [{width: 200}, null]
								 });

  /* SPLITTER 2 */
  var splitter2 = new Jx.Splitter('SplitterArea2',
                                 {splitInto:2,
                                 elements:[$('Ma'), $('De')],
                                 layout:'vertical',
								 containerOptions: [{height: 200}, null]
								 });

  main.resize();
  }
</script>

<style type="text/css">
@import url(css/jxskin-border.css);
@import url(css/dialog_forms.css);
@import url(css/slate_fusion.css);
</style>

<!--[if IE 7]>
<style>
@import url(css/slate_ie7.css);
</style>
<![endif]-->

</head>

<body>

<div id="AppContainer">

  <div id="SplitterArea">
    <div id="Si" style="BACKGROUND-COLOR: green;">
    </div>
    <div id="SplitterArea2">

		<div id="Ma" style="BACKGROUND-COLOR: red;">
		</div>

		<div id="De" style="BACKGROUND-COLOR: blue;">
	    </div>
	</div>
  </div>  

</div>
</body>
</html>

-------------------------------------------------------------------------------------------------

What is wrong in this code?

Thanks in advance for your suggestion
-- 
View this message in context: http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1647461.html
Sent from the Fusion Users mailing list archive at Nabble.com.