[fusion-users] Nested JxSplitters which don't want to work
Paul Spencer
pspencer at dmsolutions.ca
Fri Dec 12 11:36:51 EST 2008
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/
More information about the fusion-users
mailing list