Whenever I resize the bar between the West and Inner Center areas, it turns green. However, the bar between the Inner Center and Inner South areas does not change color. How can I make it turn green when resizing, including adding the orange highlight for the drag handle?
HTML
<div class="ui-layout-center" id="inner">
<div id="inner-center" class="ui-layout-center">Inner Center</div>
<div id="inner-south" class="ui-layout-south">Inner South</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-west">West</div>
CSS
.ui-layout-north {
border: none;
}
.ui-layout-center {
border: none;
}
.ui-layout-pane-center {
padding: 0px;
}
#inner-center {
border: 0px;
}
#inner-south {
border: 0px;
}
Javascript
var myLayout;
var myLayoutInner;
$(document).ready(function () {
myLayout = $('body').layout({ // reference only - these options are NOT required because 'true' is the default
closable: true, // pane can open & close
resizable: true, // when open, pane can be resized
slidable: false, // when closed, pane can 'slide' open over other panes - closes on mouse-out
livePaneResizing: true,
north__size: '100',
north__minSize: '100',
north__maxSize: '100',
north__closable: false,
north__resizable: false,
north__slidable: false,
north__spacing_open: 0,
north__spacing_closed: 0,
west__togglerLength_closed: '100%', // toggle-button is full-width of resizer-bar
west__spacing_closed: 20 // big resizer-bar when open (zero height)
});
myLayoutInner = $('#inner').layout({
applyDefaultStyles: true,
slidable: false, // when closed, pane can 'slide' open over other panes - closes on mouse-out
livePaneResizing: true,
stateManagement__enabled: true,
//initClosed: true,
//south__minSize: 100
});
});
You can see the functionality in action here: http://jsfiddle.net/xUvJk/