dojo splitter not resizing properly with dynamic content

Question

I'm creating a seemingly simple dojo 1.8 web page which contains an app layout div containing a tab container and an alarm panel below the tab container. They are separated by a splitter so the user can select how much of the alarms or the tabcontainer they want to see.

Here's the example on jsfiddle:

http://jsfiddle.net/bfW7u/

For the purpose of the demo, there's a timer which grows the table in the alarm panel by an entry every 2 seconds.

The problem(s):

1. If one doesn't do anything and just lets the table grow, no scroll bar appears in the alarm panel.

2. If one moves the splitter without having resized the browser window first, the splitter handle ends up in a weird location.

3. Resizing the browser window makes it behave like I would expect it to begin with.

Questions:

1. Am I doing something wrong in the way I'm setting things up and that's causing this problem?

2. How can I catch the splitter has been moved event (name?)

3. How do I resize the splitter pane to an arbitrary height? I've tried using domStyle.set("alarmPanel", "height", 300) and this indeed sets the height property... but the pane does not resize!

Any help greatly appreciated!

Answer 1

I forked your jsFiddle and made some modifications to it: http://jsfiddle.net/phusick/f7qL6/

1. Get rid of overflow: hidden in html, body and explicitly set height of alarmPanel:

   .claro .demoLayout .edgePanel {
       height: 150px;
   }
   

2. This tricky one. You have two options: to listen to splitter's drag and drop or to listen to ContentPane.resize method invocation. Both via dojo/aspect:

   // Drag and Drop
   var splitter = registry.byId("appLayout").getSplitter("bottom");
   var moveHandle = null;
   
   aspect.after(splitter, "_startDrag", function() {
       moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
           var coords = {
               x: !splitter.horizontal ? splitter.domNode.style.left : 0,
               y: splitter.horizontal ? splitter.domNode.style.top : 0
           }
           dom.byId("dndOutput").textContent = JSON.stringify(coords);
       })
   });  
   
   aspect.after(splitter, "_stopDrag", function() {
       moveHandle && moveHandle.remove();
   });
   
   
   // ContentPane.resize()   
   aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
       dom.byId("resizeOutput").textContent = JSON.stringify(size);
   });    
   

3. Call layout() method after changing the size:

   registry.byId("alarmPanel").domNode.style.height = "200px";                
   registry.byId("appLayout").layout();