Using Split Containers on a 2x2 layout

Submitted by novakal627 on Thu, 12/13/2007 - 15:56.

Hi all,

I have a page with a 2 by 2 layout and I was wondering if there was anyway to add 4 splitters (2 horizontal and 2 vertical) to allow the user to resize all four content panes.

Page Layout:
Content 1 | Content 2
---------- ----------
Content 3 | Content 4

(Horizontal splitter between Content 1 and Content 2)
(Horizontal splitter between Content 3 and Content 4)
(Vertical splitter between Content 1 and Content 3)
(Vertical splitter between Content 2 and Content 4)

I have been able to create a layout with 2 horizontal splitters and 1 vertical splitter, but I can't seem to figure out how to create 2 horizontal splitters and 2 vertical splitters or if it is even possible.

Here is the code I had to create 2 horizontal splitters and 1 vertical splitter:




  @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
  @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    


    

  dojo.require("dojo.parser");
  dojo.require("dijit.layout.SplitContainer");
  dojo.require("dijit.layout.ContentPane");






 
                
        
                
                Content 1
                
                Content 2
        
        
                
                Content 3
                
                Content 4

Any suggestions/help would be greatly appreciated. Thanks so much!

- Kallie

Login or register to post comments
Unsubscribe post

i'd do three if I could get

Submitted by dante on Thu, 12/13/2007 - 17:32.

i'd do three if I could get away with it.

a top and bottom pane, split by one resize handle, and each of the two panes having one each.

the problem then would be synchronizing the two individual ones, which might be possible with activeresizing, though i've not investigated how to tell a resize handle to change positions.

The layout you describe is

Submitted by novakal627 on Thu, 12/13/2007 - 23:20.

The layout you describe is the one that I show in my code and I do not need to synchronize the two individual ones, I want the user to be able to resize any of the 4 panes individually.

Unfortunately, I need to have 4 panes that can resize both horizontally and vertically so I cannot get away with only 3 splitters. Perhaps this split container is not going to work after all?

It's not the SplitContainer That's Making this Impossible

Submitted by criecke on Sun, 01/06/2008 - 22:13.

... it's geometry. If you start out your panes like this:

111 | 222
111 | 222
111 | 222
---- ----
333 | 444
333 | 444
333 | 444

Now move the splitter between 2 and 4 up:

The move the splitter between 1 and 2 across:

Now pane 2 is not a rectangular pane anymore. True, you could also resize the splitter between 3 and 4:

But now if you move the splitter between 1 and 2:

Now 1 is not rectangular. So you'd have to use z-order or something for cover-up.

Search