[fusion-users] Nested JxSplitters which don't want to work
Paul Spencer
pspencer at dmsolutions.ca
Fri Dec 12 11:51:06 EST 2008
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
>>>>>>> fusion-users at lists.osgeo.org
>>>>>>> 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
>>>>>> fusion-users at lists.osgeo.org
>>>>>> 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
>>>>> fusion-users at lists.osgeo.org
>>>>> 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
>>>> fusion-users at lists.osgeo.org
>>>> 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
>>> fusion-users at lists.osgeo.org
>>> 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
>> fusion-users at lists.osgeo.org
>> 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
> fusion-users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/fusion-users
__________________________________________
Paul Spencer
Chief Technology Officer
DM Solutions Group Inc
http://research.dmsolutions.ca/
More information about the fusion-users
mailing list