Nested JxSplitters which don't want to work

9 messages Options
Embed this post
Permalink
kde

Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink

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.

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
Paul Spencer-2

Re: Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink
Hi - you need to join the list if you want to post questions otherwise.

I just copied and pasted your code into an HTML file and loaded it and  
I see a green rectangle covering the left half of the viewport and a  
red rectangle covering the top right quarter and a blue rectangle  
covering the bottom right.  However, this is not exactly what the code  
is asking for.  The problem is that the splitters manage the content  
areas but you are also creating Jx.Layout objects to manage the  
content areas, so there is a confict.

Removing the extra Jx.Layout and the default options, the code should  
look like:

<script type="text/javascript">
var main;
window.onload = function() {
     main = new Jx.Layout('AppContainer', {
         top: 2
     });
     var sa1 = new Jx.Layout('SplitterArea', {
         left: 2,
         right: 2,
         top: 2,
         bottom: 2
     });
     /* SPLITTER 1 */
     var splitter = new Jx.Splitter('SplitterArea', {
                elements: [$('Si'), $('SplitterArea2')],
                containerOptions: [{width: 200}, null]
        });
        /* SPLITTER 2 */
     var splitter2 = new Jx.Splitter('SplitterArea2',{
         elements:[$('Ma'), $('De')],
         layout:'vertical',
                containerOptions: [{height: 200}, null]
        });
     main.resize();
}
</script>

Cheers

Paul


On 12-Dec-08, at 6:56 AM, kde wrote:

>
> 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.
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users


__________________________________________

    Paul Spencer
    Chief Technology Officer
    DM Solutions Group Inc
    http://research.dmsolutions.ca/

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
kde

Re: Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink

Thanks Paul. Now I can see the second DIV (the red one) but not the third DIV
(the blue one).
I tried with several sizes but I can't make it work. The third DIV is too
little to be visible. It seems that the second DIV use all the heigh of the
window (it is what I see when I inspect the DOM tree of the page)

PS: I'm using Firefox 3



Paul Spencer-2 wrote:

>
> Hi - you need to join the list if you want to post questions otherwise.
>
> I just copied and pasted your code into an HTML file and loaded it and  
> I see a green rectangle covering the left half of the viewport and a  
> red rectangle covering the top right quarter and a blue rectangle  
> covering the bottom right.  However, this is not exactly what the code  
> is asking for.  The problem is that the splitters manage the content  
> areas but you are also creating Jx.Layout objects to manage the  
> content areas, so there is a confict.
>
> Removing the extra Jx.Layout and the default options, the code should  
> look like:
>
> <script type="text/javascript">
> var main;
> window.onload = function() {
>      main = new Jx.Layout('AppContainer', {
>          top: 2
>      });
>      var sa1 = new Jx.Layout('SplitterArea', {
>          left: 2,
>          right: 2,
>          top: 2,
>          bottom: 2
>      });
>      /* SPLITTER 1 */
>      var splitter = new Jx.Splitter('SplitterArea', {
> elements: [$('Si'), $('SplitterArea2')],
> containerOptions: [{width: 200}, null]
> });
> /* SPLITTER 2 */
>      var splitter2 = new Jx.Splitter('SplitterArea2',{
>          elements:[$('Ma'), $('De')],
>          layout:'vertical',
> containerOptions: [{height: 200}, null]
> });
>      main.resize();
> }
> </script>
>
> Cheers
>
> Paul
>
>
> On 12-Dec-08, at 6:56 AM, kde wrote:
>
>>
>> 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.
>>
>> _______________________________________________
>> fusion-users mailing list
>> [hidden email]
>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>
>
> __________________________________________
>
>     Paul Spencer
>     Chief Technology Officer
>     DM Solutions Group Inc
>     http://research.dmsolutions.ca/
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users
>
>

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

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
Paul Spencer-2

Re: Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink
darn, me too ... can you send you current page (complete)

Paul

On 12-Dec-08, at 11:07 AM, kde wrote:

>
> Thanks Paul. Now I can see the second DIV (the red one) but not the  
> third DIV
> (the blue one).
> I tried with several sizes but I can't make it work. The third DIV  
> is too
> little to be visible. It seems that the second DIV use all the heigh  
> of the
> window (it is what I see when I inspect the DOM tree of the page)
>
> PS: I'm using Firefox 3
>
>
>
> Paul Spencer-2 wrote:
>>
>> Hi - you need to join the list if you want to post questions  
>> otherwise.
>>
>> I just copied and pasted your code into an HTML file and loaded it  
>> and
>> I see a green rectangle covering the left half of the viewport and a
>> red rectangle covering the top right quarter and a blue rectangle
>> covering the bottom right.  However, this is not exactly what the  
>> code
>> is asking for.  The problem is that the splitters manage the content
>> areas but you are also creating Jx.Layout objects to manage the
>> content areas, so there is a confict.
>>
>> Removing the extra Jx.Layout and the default options, the code should
>> look like:
>>
>> <script type="text/javascript">
>> var main;
>> window.onload = function() {
>>     main = new Jx.Layout('AppContainer', {
>>         top: 2
>>     });
>>     var sa1 = new Jx.Layout('SplitterArea', {
>>         left: 2,
>>         right: 2,
>>         top: 2,
>>         bottom: 2
>>     });
>>     /* SPLITTER 1 */
>>     var splitter = new Jx.Splitter('SplitterArea', {
>> elements: [$('Si'), $('SplitterArea2')],
>> containerOptions: [{width: 200}, null]
>> });
>> /* SPLITTER 2 */
>>     var splitter2 = new Jx.Splitter('SplitterArea2',{
>>         elements:[$('Ma'), $('De')],
>>         layout:'vertical',
>> containerOptions: [{height: 200}, null]
>> });
>>     main.resize();
>> }
>> </script>
>>
>> Cheers
>>
>> Paul
>>
>>
>> On 12-Dec-08, at 6:56 AM, kde wrote:
>>
>>>
>>> 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.
>>>
>>> _______________________________________________
>>> fusion-users mailing list
>>> [hidden email]
>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>
>>
>> __________________________________________
>>
>>    Paul Spencer
>>    Chief Technology Officer
>>    DM Solutions Group Inc
>>    http://research.dmsolutions.ca/
>>
>> _______________________________________________
>> fusion-users mailing list
>> [hidden email]
>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>
>>
>
> --
> View this message in context: http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648372.html
> Sent from the Fusion Users mailing list archive at Nabble.com.
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users


__________________________________________

    Paul Spencer
    Chief Technology Officer
    DM Solutions Group Inc
    http://research.dmsolutions.ca/

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
kde

Re: Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink

Here is the current page :

-----------------------------------------------------------------------------------------------
<!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', {
         top: 2
  });
  var sa1 = new Jx.Layout('SplitterArea', {
         left: 2,
         right: 2,
         top: 2,
         bottom: 2
  });
 
  /* SPLITTER 1 */
  var splitter = new Jx.Splitter('SplitterArea',
                                 {
                                                                 elements: [$('Si'), $('SplitterArea2')],
                                 layout:'horizontal',
                                                                 containerOptions: [{width: 200}]
                                                                 });
  /* SPLITTER 2 */
  var splitter2 = new Jx.Splitter('SplitterArea2',
                                 {
                                 elements:[$('Ma'), $('De')],
                                 layout:'vertical',
                                                                 containerOptions: [{height: 200}, {height: auto}]
                                                                 });
  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>
-----------------------------------------------------------------------------------------------

Thanks for your help!

Kevin


Paul Spencer-2 wrote:

>
> darn, me too ... can you send you current page (complete)
>
> Paul
>
> On 12-Dec-08, at 11:07 AM, kde wrote:
>
>>
>> Thanks Paul. Now I can see the second DIV (the red one) but not the  
>> third DIV
>> (the blue one).
>> I tried with several sizes but I can't make it work. The third DIV  
>> is too
>> little to be visible. It seems that the second DIV use all the heigh  
>> of the
>> window (it is what I see when I inspect the DOM tree of the page)
>>
>> PS: I'm using Firefox 3
>>
>>
>>
>> Paul Spencer-2 wrote:
>>>
>>> Hi - you need to join the list if you want to post questions  
>>> otherwise.
>>>
>>> I just copied and pasted your code into an HTML file and loaded it  
>>> and
>>> I see a green rectangle covering the left half of the viewport and a
>>> red rectangle covering the top right quarter and a blue rectangle
>>> covering the bottom right.  However, this is not exactly what the  
>>> code
>>> is asking for.  The problem is that the splitters manage the content
>>> areas but you are also creating Jx.Layout objects to manage the
>>> content areas, so there is a confict.
>>>
>>> Removing the extra Jx.Layout and the default options, the code should
>>> look like:
>>>
>>> <script type="text/javascript">
>>> var main;
>>> window.onload = function() {
>>>     main = new Jx.Layout('AppContainer', {
>>>         top: 2
>>>     });
>>>     var sa1 = new Jx.Layout('SplitterArea', {
>>>         left: 2,
>>>         right: 2,
>>>         top: 2,
>>>         bottom: 2
>>>     });
>>>     /* SPLITTER 1 */
>>>     var splitter = new Jx.Splitter('SplitterArea', {
>>> elements: [$('Si'), $('SplitterArea2')],
>>> containerOptions: [{width: 200}, null]
>>> });
>>> /* SPLITTER 2 */
>>>     var splitter2 = new Jx.Splitter('SplitterArea2',{
>>>         elements:[$('Ma'), $('De')],
>>>         layout:'vertical',
>>> containerOptions: [{height: 200}, null]
>>> });
>>>     main.resize();
>>> }
>>> </script>
>>>
>>> Cheers
>>>
>>> Paul
>>>
>>>
>>> On 12-Dec-08, at 6:56 AM, kde wrote:
>>>
>>>>
>>>> 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.
>>>>
>>>> _______________________________________________
>>>> fusion-users mailing list
>>>> [hidden email]
>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>
>>>
>>> __________________________________________
>>>
>>>    Paul Spencer
>>>    Chief Technology Officer
>>>    DM Solutions Group Inc
>>>    http://research.dmsolutions.ca/
>>>
>>> _______________________________________________
>>> fusion-users mailing list
>>> [hidden email]
>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>
>>>
>>
>> --
>> View this message in context:
>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648372.html
>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>
>> _______________________________________________
>> fusion-users mailing list
>> [hidden email]
>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>
>
> __________________________________________
>
>     Paul Spencer
>     Chief Technology Officer
>     DM Solutions Group Inc
>     http://research.dmsolutions.ca/
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users
>
>

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

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
Paul Spencer-2

Re: Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink
try removing height: auto and just use {} instead

Paul

On 12-Dec-08, at 11:29 AM, kde wrote:

>
> Here is the current page :
>
> -----------------------------------------------------------------------------------------------
> <!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', {
>         top: 2
>  });
>  var sa1 = new Jx.Layout('SplitterArea', {
>         left: 2,
>         right: 2,
>         top: 2,
>         bottom: 2
>  });
>
>  /* SPLITTER 1 */
>  var splitter = new Jx.Splitter('SplitterArea',
>                                 {
> elements: [$('Si'), $('SplitterArea2')],
>                                 layout:'horizontal',
> containerOptions: [{width: 200}]
> });
>  /* SPLITTER 2 */
>  var splitter2 = new Jx.Splitter('SplitterArea2',
>                                 {
>                                 elements:[$('Ma'), $('De')],
>                                 layout:'vertical',
> containerOptions: [{height: 200}, {height: auto}]
> });
>  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>
> -----------------------------------------------------------------------------------------------
>
> Thanks for your help!
>
> Kevin
>
>
> Paul Spencer-2 wrote:
>>
>> darn, me too ... can you send you current page (complete)
>>
>> Paul
>>
>> On 12-Dec-08, at 11:07 AM, kde wrote:
>>
>>>
>>> Thanks Paul. Now I can see the second DIV (the red one) but not the
>>> third DIV
>>> (the blue one).
>>> I tried with several sizes but I can't make it work. The third DIV
>>> is too
>>> little to be visible. It seems that the second DIV use all the heigh
>>> of the
>>> window (it is what I see when I inspect the DOM tree of the page)
>>>
>>> PS: I'm using Firefox 3
>>>
>>>
>>>
>>> Paul Spencer-2 wrote:
>>>>
>>>> Hi - you need to join the list if you want to post questions
>>>> otherwise.
>>>>
>>>> I just copied and pasted your code into an HTML file and loaded it
>>>> and
>>>> I see a green rectangle covering the left half of the viewport  
>>>> and a
>>>> red rectangle covering the top right quarter and a blue rectangle
>>>> covering the bottom right.  However, this is not exactly what the
>>>> code
>>>> is asking for.  The problem is that the splitters manage the  
>>>> content
>>>> areas but you are also creating Jx.Layout objects to manage the
>>>> content areas, so there is a confict.
>>>>
>>>> Removing the extra Jx.Layout and the default options, the code  
>>>> should
>>>> look like:
>>>>
>>>> <script type="text/javascript">
>>>> var main;
>>>> window.onload = function() {
>>>>    main = new Jx.Layout('AppContainer', {
>>>>        top: 2
>>>>    });
>>>>    var sa1 = new Jx.Layout('SplitterArea', {
>>>>        left: 2,
>>>>        right: 2,
>>>>        top: 2,
>>>>        bottom: 2
>>>>    });
>>>>    /* SPLITTER 1 */
>>>>    var splitter = new Jx.Splitter('SplitterArea', {
>>>> elements: [$('Si'), $('SplitterArea2')],
>>>> containerOptions: [{width: 200}, null]
>>>> });
>>>> /* SPLITTER 2 */
>>>>    var splitter2 = new Jx.Splitter('SplitterArea2',{
>>>>        elements:[$('Ma'), $('De')],
>>>>        layout:'vertical',
>>>> containerOptions: [{height: 200}, null]
>>>> });
>>>>    main.resize();
>>>> }
>>>> </script>
>>>>
>>>> Cheers
>>>>
>>>> Paul
>>>>
>>>>
>>>> On 12-Dec-08, at 6:56 AM, kde wrote:
>>>>
>>>>>
>>>>> 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.
>>>>>
>>>>> _______________________________________________
>>>>> fusion-users mailing list
>>>>> [hidden email]
>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>
>>>>
>>>> __________________________________________
>>>>
>>>>   Paul Spencer
>>>>   Chief Technology Officer
>>>>   DM Solutions Group Inc
>>>>   http://research.dmsolutions.ca/
>>>>
>>>> _______________________________________________
>>>> fusion-users mailing list
>>>> [hidden email]
>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>
>>>>
>>>
>>> --
>>> View this message in context:
>>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648372.html
>>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>>
>>> _______________________________________________
>>> fusion-users mailing list
>>> [hidden email]
>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>
>>
>> __________________________________________
>>
>>    Paul Spencer
>>    Chief Technology Officer
>>    DM Solutions Group Inc
>>    http://research.dmsolutions.ca/
>>
>> _______________________________________________
>> fusion-users mailing list
>> [hidden email]
>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>
>>
>
> --
> View this message in context: http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648529.html
> Sent from the Fusion Users mailing list archive at Nabble.com.
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users


__________________________________________

    Paul Spencer
    Chief Technology Officer
    DM Solutions Group Inc
    http://research.dmsolutions.ca/

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
kde

Re: Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink

Sorry, I forgot to remove the "height: auto" in the code I post. But I
already tried without and it doesn't work.


Paul Spencer-2 wrote:

>
> try removing height: auto and just use {} instead
>
> Paul
>
> On 12-Dec-08, at 11:29 AM, kde wrote:
>
>>
>> Here is the current page :
>>
>> -----------------------------------------------------------------------------------------------
>> <!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', {
>>         top: 2
>>  });
>>  var sa1 = new Jx.Layout('SplitterArea', {
>>         left: 2,
>>         right: 2,
>>         top: 2,
>>         bottom: 2
>>  });
>>
>>  /* SPLITTER 1 */
>>  var splitter = new Jx.Splitter('SplitterArea',
>>                                 {
>> elements: [$('Si'), $('SplitterArea2')],
>>                                 layout:'horizontal',
>> containerOptions: [{width: 200}]
>> });
>>  /* SPLITTER 2 */
>>  var splitter2 = new Jx.Splitter('SplitterArea2',
>>                                 {
>>                                 elements:[$('Ma'), $('De')],
>>                                 layout:'vertical',
>> containerOptions: [{height: 200}, {height: auto}]
>> });
>>  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>
>> -----------------------------------------------------------------------------------------------
>>
>> Thanks for your help!
>>
>> Kevin
>>
>>
>> Paul Spencer-2 wrote:
>>>
>>> darn, me too ... can you send you current page (complete)
>>>
>>> Paul
>>>
>>> On 12-Dec-08, at 11:07 AM, kde wrote:
>>>
>>>>
>>>> Thanks Paul. Now I can see the second DIV (the red one) but not the
>>>> third DIV
>>>> (the blue one).
>>>> I tried with several sizes but I can't make it work. The third DIV
>>>> is too
>>>> little to be visible. It seems that the second DIV use all the heigh
>>>> of the
>>>> window (it is what I see when I inspect the DOM tree of the page)
>>>>
>>>> PS: I'm using Firefox 3
>>>>
>>>>
>>>>
>>>> Paul Spencer-2 wrote:
>>>>>
>>>>> Hi - you need to join the list if you want to post questions
>>>>> otherwise.
>>>>>
>>>>> I just copied and pasted your code into an HTML file and loaded it
>>>>> and
>>>>> I see a green rectangle covering the left half of the viewport  
>>>>> and a
>>>>> red rectangle covering the top right quarter and a blue rectangle
>>>>> covering the bottom right.  However, this is not exactly what the
>>>>> code
>>>>> is asking for.  The problem is that the splitters manage the  
>>>>> content
>>>>> areas but you are also creating Jx.Layout objects to manage the
>>>>> content areas, so there is a confict.
>>>>>
>>>>> Removing the extra Jx.Layout and the default options, the code  
>>>>> should
>>>>> look like:
>>>>>
>>>>> <script type="text/javascript">
>>>>> var main;
>>>>> window.onload = function() {
>>>>>    main = new Jx.Layout('AppContainer', {
>>>>>        top: 2
>>>>>    });
>>>>>    var sa1 = new Jx.Layout('SplitterArea', {
>>>>>        left: 2,
>>>>>        right: 2,
>>>>>        top: 2,
>>>>>        bottom: 2
>>>>>    });
>>>>>    /* SPLITTER 1 */
>>>>>    var splitter = new Jx.Splitter('SplitterArea', {
>>>>> elements: [$('Si'), $('SplitterArea2')],
>>>>> containerOptions: [{width: 200}, null]
>>>>> });
>>>>> /* SPLITTER 2 */
>>>>>    var splitter2 = new Jx.Splitter('SplitterArea2',{
>>>>>        elements:[$('Ma'), $('De')],
>>>>>        layout:'vertical',
>>>>> containerOptions: [{height: 200}, null]
>>>>> });
>>>>>    main.resize();
>>>>> }
>>>>> </script>
>>>>>
>>>>> Cheers
>>>>>
>>>>> Paul
>>>>>
>>>>>
>>>>> On 12-Dec-08, at 6:56 AM, kde wrote:
>>>>>
>>>>>>
>>>>>> 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.
>>>>>>
>>>>>> _______________________________________________
>>>>>> fusion-users mailing list
>>>>>> [hidden email]
>>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>>
>>>>>
>>>>> __________________________________________
>>>>>
>>>>>   Paul Spencer
>>>>>   Chief Technology Officer
>>>>>   DM Solutions Group Inc
>>>>>   http://research.dmsolutions.ca/
>>>>>
>>>>> _______________________________________________
>>>>> fusion-users mailing list
>>>>> [hidden email]
>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>>
>>>>>
>>>>
>>>> --
>>>> View this message in context:
>>>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648372.html
>>>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>>>
>>>> _______________________________________________
>>>> fusion-users mailing list
>>>> [hidden email]
>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>
>>>
>>> __________________________________________
>>>
>>>    Paul Spencer
>>>    Chief Technology Officer
>>>    DM Solutions Group Inc
>>>    http://research.dmsolutions.ca/
>>>
>>> _______________________________________________
>>> fusion-users mailing list
>>> [hidden email]
>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>
>>>
>>
>> --
>> View this message in context:
>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648529.html
>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>
>> _______________________________________________
>> fusion-users mailing list
>> [hidden email]
>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>
>
> __________________________________________
>
>     Paul Spencer
>     Chief Technology Officer
>     DM Solutions Group Inc
>     http://research.dmsolutions.ca/
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users
>
>

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

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
Paul Spencer-2

Re: Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink
I'm not sure what else ... using your exact HTML below (less the  
height: auto) works for me

Actually, there is one difference ... the css files aren't loading for  
me because the html page is in a different place (I adjusted the path  
to fusion.js appropriately).  Try removing the style blocks and see  
what happens.

Cheers

Paul

On 12-Dec-08, at 11:45 AM, kde wrote:

>
> Sorry, I forgot to remove the "height: auto" in the code I post. But I
> already tried without and it doesn't work.
>
>
> Paul Spencer-2 wrote:
>>
>> try removing height: auto and just use {} instead
>>
>> Paul
>>
>> On 12-Dec-08, at 11:29 AM, kde wrote:
>>
>>>
>>> Here is the current page :
>>>
>>> -----------------------------------------------------------------------------------------------
>>> <!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', {
>>>        top: 2
>>> });
>>> var sa1 = new Jx.Layout('SplitterArea', {
>>>        left: 2,
>>>        right: 2,
>>>        top: 2,
>>>        bottom: 2
>>> });
>>>
>>> /* SPLITTER 1 */
>>> var splitter = new Jx.Splitter('SplitterArea',
>>>                                {
>>> elements: [$('Si'), $('SplitterArea2')],
>>>                                layout:'horizontal',
>>> containerOptions: [{width: 200}]
>>> });
>>> /* SPLITTER 2 */
>>> var splitter2 = new Jx.Splitter('SplitterArea2',
>>>                                {
>>>                                elements:[$('Ma'), $('De')],
>>>                                layout:'vertical',
>>> containerOptions: [{height: 200}, {height: auto}]
>>> });
>>> 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>
>>> -----------------------------------------------------------------------------------------------
>>>
>>> Thanks for your help!
>>>
>>> Kevin
>>>
>>>
>>> Paul Spencer-2 wrote:
>>>>
>>>> darn, me too ... can you send you current page (complete)
>>>>
>>>> Paul
>>>>
>>>> On 12-Dec-08, at 11:07 AM, kde wrote:
>>>>
>>>>>
>>>>> Thanks Paul. Now I can see the second DIV (the red one) but not  
>>>>> the
>>>>> third DIV
>>>>> (the blue one).
>>>>> I tried with several sizes but I can't make it work. The third DIV
>>>>> is too
>>>>> little to be visible. It seems that the second DIV use all the  
>>>>> heigh
>>>>> of the
>>>>> window (it is what I see when I inspect the DOM tree of the page)
>>>>>
>>>>> PS: I'm using Firefox 3
>>>>>
>>>>>
>>>>>
>>>>> Paul Spencer-2 wrote:
>>>>>>
>>>>>> Hi - you need to join the list if you want to post questions
>>>>>> otherwise.
>>>>>>
>>>>>> I just copied and pasted your code into an HTML file and loaded  
>>>>>> it
>>>>>> and
>>>>>> I see a green rectangle covering the left half of the viewport
>>>>>> and a
>>>>>> red rectangle covering the top right quarter and a blue rectangle
>>>>>> covering the bottom right.  However, this is not exactly what the
>>>>>> code
>>>>>> is asking for.  The problem is that the splitters manage the
>>>>>> content
>>>>>> areas but you are also creating Jx.Layout objects to manage the
>>>>>> content areas, so there is a confict.
>>>>>>
>>>>>> Removing the extra Jx.Layout and the default options, the code
>>>>>> should
>>>>>> look like:
>>>>>>
>>>>>> <script type="text/javascript">
>>>>>> var main;
>>>>>> window.onload = function() {
>>>>>>   main = new Jx.Layout('AppContainer', {
>>>>>>       top: 2
>>>>>>   });
>>>>>>   var sa1 = new Jx.Layout('SplitterArea', {
>>>>>>       left: 2,
>>>>>>       right: 2,
>>>>>>       top: 2,
>>>>>>       bottom: 2
>>>>>>   });
>>>>>>   /* SPLITTER 1 */
>>>>>>   var splitter = new Jx.Splitter('SplitterArea', {
>>>>>> elements: [$('Si'), $('SplitterArea2')],
>>>>>> containerOptions: [{width: 200}, null]
>>>>>> });
>>>>>> /* SPLITTER 2 */
>>>>>>   var splitter2 = new Jx.Splitter('SplitterArea2',{
>>>>>>       elements:[$('Ma'), $('De')],
>>>>>>       layout:'vertical',
>>>>>> containerOptions: [{height: 200}, null]
>>>>>> });
>>>>>>   main.resize();
>>>>>> }
>>>>>> </script>
>>>>>>
>>>>>> Cheers
>>>>>>
>>>>>> Paul
>>>>>>
>>>>>>
>>>>>> On 12-Dec-08, at 6:56 AM, kde wrote:
>>>>>>
>>>>>>>
>>>>>>> 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.
>>>>>>>
>>>>>>> _______________________________________________
>>>>>>> fusion-users mailing list
>>>>>>> [hidden email]
>>>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>>>
>>>>>>
>>>>>> __________________________________________
>>>>>>
>>>>>>  Paul Spencer
>>>>>>  Chief Technology Officer
>>>>>>  DM Solutions Group Inc
>>>>>>  http://research.dmsolutions.ca/
>>>>>>
>>>>>> _______________________________________________
>>>>>> fusion-users mailing list
>>>>>> [hidden email]
>>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>>>
>>>>>>
>>>>>
>>>>> --
>>>>> View this message in context:
>>>>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648372.html
>>>>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>>>>
>>>>> _______________________________________________
>>>>> fusion-users mailing list
>>>>> [hidden email]
>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>
>>>>
>>>> __________________________________________
>>>>
>>>>   Paul Spencer
>>>>   Chief Technology Officer
>>>>   DM Solutions Group Inc
>>>>   http://research.dmsolutions.ca/
>>>>
>>>> _______________________________________________
>>>> fusion-users mailing list
>>>> [hidden email]
>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>
>>>>
>>>
>>> --
>>> View this message in context:
>>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648529.html
>>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>>
>>> _______________________________________________
>>> fusion-users mailing list
>>> [hidden email]
>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>
>>
>> __________________________________________
>>
>>    Paul Spencer
>>    Chief Technology Officer
>>    DM Solutions Group Inc
>>    http://research.dmsolutions.ca/
>>
>> _______________________________________________
>> fusion-users mailing list
>> [hidden email]
>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>
>>
>
> --
> View this message in context: http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648589.html
> Sent from the Fusion Users mailing list archive at Nabble.com.
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users


__________________________________________

    Paul Spencer
    Chief Technology Officer
    DM Solutions Group Inc
    http://research.dmsolutions.ca/

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users
kde

Re: Nested JxSplitters which don't want to work

Reply Threaded More More options
Print post
Permalink

Hi Paul,

The difference was the problem : without css files, it works.
I investigate a little and I saw that without only the slate_fusion.css, it
works.

So, I will investigate more on this: the DIV which wasn't displayed ("De",
the blue one) has this style properties given by the JxSplitter: "position:
absolute; left: 0px; top: 934px; width: 918px; height: 0px;".
I think the top property is a wrong value.


Paul Spencer-2 wrote:

>
> I'm not sure what else ... using your exact HTML below (less the  
> height: auto) works for me
>
> Actually, there is one difference ... the css files aren't loading for  
> me because the html page is in a different place (I adjusted the path  
> to fusion.js appropriately).  Try removing the style blocks and see  
> what happens.
>
> Cheers
>
> Paul
>
> On 12-Dec-08, at 11:45 AM, kde wrote:
>
>>
>> Sorry, I forgot to remove the "height: auto" in the code I post. But I
>> already tried without and it doesn't work.
>>
>>
>> Paul Spencer-2 wrote:
>>>
>>> try removing height: auto and just use {} instead
>>>
>>> Paul
>>>
>>> On 12-Dec-08, at 11:29 AM, kde wrote:
>>>
>>>>
>>>> Here is the current page :
>>>>
>>>> -----------------------------------------------------------------------------------------------
>>>> <!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', {
>>>>        top: 2
>>>> });
>>>> var sa1 = new Jx.Layout('SplitterArea', {
>>>>        left: 2,
>>>>        right: 2,
>>>>        top: 2,
>>>>        bottom: 2
>>>> });
>>>>
>>>> /* SPLITTER 1 */
>>>> var splitter = new Jx.Splitter('SplitterArea',
>>>>                                {
>>>> elements: [$('Si'), $('SplitterArea2')],
>>>>                                layout:'horizontal',
>>>> containerOptions: [{width: 200}]
>>>> });
>>>> /* SPLITTER 2 */
>>>> var splitter2 = new Jx.Splitter('SplitterArea2',
>>>>                                {
>>>>                                elements:[$('Ma'), $('De')],
>>>>                                layout:'vertical',
>>>> containerOptions: [{height: 200}, {height: auto}]
>>>> });
>>>> 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>
>>>> -----------------------------------------------------------------------------------------------
>>>>
>>>> Thanks for your help!
>>>>
>>>> Kevin
>>>>
>>>>
>>>> Paul Spencer-2 wrote:
>>>>>
>>>>> darn, me too ... can you send you current page (complete)
>>>>>
>>>>> Paul
>>>>>
>>>>> On 12-Dec-08, at 11:07 AM, kde wrote:
>>>>>
>>>>>>
>>>>>> Thanks Paul. Now I can see the second DIV (the red one) but not  
>>>>>> the
>>>>>> third DIV
>>>>>> (the blue one).
>>>>>> I tried with several sizes but I can't make it work. The third DIV
>>>>>> is too
>>>>>> little to be visible. It seems that the second DIV use all the  
>>>>>> heigh
>>>>>> of the
>>>>>> window (it is what I see when I inspect the DOM tree of the page)
>>>>>>
>>>>>> PS: I'm using Firefox 3
>>>>>>
>>>>>>
>>>>>>
>>>>>> Paul Spencer-2 wrote:
>>>>>>>
>>>>>>> Hi - you need to join the list if you want to post questions
>>>>>>> otherwise.
>>>>>>>
>>>>>>> I just copied and pasted your code into an HTML file and loaded  
>>>>>>> it
>>>>>>> and
>>>>>>> I see a green rectangle covering the left half of the viewport
>>>>>>> and a
>>>>>>> red rectangle covering the top right quarter and a blue rectangle
>>>>>>> covering the bottom right.  However, this is not exactly what the
>>>>>>> code
>>>>>>> is asking for.  The problem is that the splitters manage the
>>>>>>> content
>>>>>>> areas but you are also creating Jx.Layout objects to manage the
>>>>>>> content areas, so there is a confict.
>>>>>>>
>>>>>>> Removing the extra Jx.Layout and the default options, the code
>>>>>>> should
>>>>>>> look like:
>>>>>>>
>>>>>>> <script type="text/javascript">
>>>>>>> var main;
>>>>>>> window.onload = function() {
>>>>>>>   main = new Jx.Layout('AppContainer', {
>>>>>>>       top: 2
>>>>>>>   });
>>>>>>>   var sa1 = new Jx.Layout('SplitterArea', {
>>>>>>>       left: 2,
>>>>>>>       right: 2,
>>>>>>>       top: 2,
>>>>>>>       bottom: 2
>>>>>>>   });
>>>>>>>   /* SPLITTER 1 */
>>>>>>>   var splitter = new Jx.Splitter('SplitterArea', {
>>>>>>> elements: [$('Si'), $('SplitterArea2')],
>>>>>>> containerOptions: [{width: 200}, null]
>>>>>>> });
>>>>>>> /* SPLITTER 2 */
>>>>>>>   var splitter2 = new Jx.Splitter('SplitterArea2',{
>>>>>>>       elements:[$('Ma'), $('De')],
>>>>>>>       layout:'vertical',
>>>>>>> containerOptions: [{height: 200}, null]
>>>>>>> });
>>>>>>>   main.resize();
>>>>>>> }
>>>>>>> </script>
>>>>>>>
>>>>>>> Cheers
>>>>>>>
>>>>>>> Paul
>>>>>>>
>>>>>>>
>>>>>>> On 12-Dec-08, at 6:56 AM, kde wrote:
>>>>>>>
>>>>>>>>
>>>>>>>> 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.
>>>>>>>>
>>>>>>>> _______________________________________________
>>>>>>>> fusion-users mailing list
>>>>>>>> [hidden email]
>>>>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>>>>
>>>>>>>
>>>>>>> __________________________________________
>>>>>>>
>>>>>>>  Paul Spencer
>>>>>>>  Chief Technology Officer
>>>>>>>  DM Solutions Group Inc
>>>>>>>  http://research.dmsolutions.ca/
>>>>>>>
>>>>>>> _______________________________________________
>>>>>>> fusion-users mailing list
>>>>>>> [hidden email]
>>>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>>>>
>>>>>>>
>>>>>>
>>>>>> --
>>>>>> View this message in context:
>>>>>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648372.html
>>>>>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>>>>>
>>>>>> _______________________________________________
>>>>>> fusion-users mailing list
>>>>>> [hidden email]
>>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>>
>>>>>
>>>>> __________________________________________
>>>>>
>>>>>   Paul Spencer
>>>>>   Chief Technology Officer
>>>>>   DM Solutions Group Inc
>>>>>   http://research.dmsolutions.ca/
>>>>>
>>>>> _______________________________________________
>>>>> fusion-users mailing list
>>>>> [hidden email]
>>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>>>
>>>>>
>>>>
>>>> --
>>>> View this message in context:
>>>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648529.html
>>>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>>>
>>>> _______________________________________________
>>>> fusion-users mailing list
>>>> [hidden email]
>>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>
>>>
>>> __________________________________________
>>>
>>>    Paul Spencer
>>>    Chief Technology Officer
>>>    DM Solutions Group Inc
>>>    http://research.dmsolutions.ca/
>>>
>>> _______________________________________________
>>> fusion-users mailing list
>>> [hidden email]
>>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>>>
>>>
>>
>> --
>> View this message in context:
>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648589.html
>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>
>> _______________________________________________
>> fusion-users mailing list
>> [hidden email]
>> http://lists.osgeo.org/mailman/listinfo/fusion-users
>
>
> __________________________________________
>
>     Paul Spencer
>     Chief Technology Officer
>     DM Solutions Group Inc
>     http://research.dmsolutions.ca/
>
> _______________________________________________
> fusion-users mailing list
> [hidden email]
> http://lists.osgeo.org/mailman/listinfo/fusion-users
>
>

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

_______________________________________________
fusion-users mailing list
[hidden email]
http://lists.osgeo.org/mailman/listinfo/fusion-users