[fusion-users] Nested JxSplitters which don't want to work
kde
kdelcroix at celsius-tech.com
Fri Dec 12 11:45:39 EST 2008
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.
More information about the fusion-users
mailing list