[fusion-users] Nested JxSplitters which don't want to work
kde
kdelcroix at celsius-tech.com
Mon Dec 15 04:37:14 EST 2008
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
>>>>>>>> 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/
>
> _______________________________________________
> 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-tp1647461p1657471.html
Sent from the Fusion Users mailing list archive at Nabble.com.
More information about the fusion-users
mailing list