Tuesday 16 February 2010

YUI Layout: Set a minimum width for the 'centre' cell

The YUI layout class is great. And the ability to resize 'cells' within the layout is really useful. But you cannot set a minimum width for the 'center' cell. So, below is an example of how to add a resize event handler to make sure the 'center' cell doesn't become too thin. This assumes a layout with a 'left' and 'center' cell, but no 'right' cell. Also ensure that the minimum width of the 'left' cell and the 'center' cell combined does not exceed the minimum width of the layout itself.

var layout;
...
var minWidth = 200;
layout.on('resize', function(args){
var leftWidth = layout.getUnitByPosition('left').get("width");
var centerWidth = layout.getUnitByPosition('center').get("width");
if (centerWidth < minWidth) {
leftWidth = leftWidth - (minWidth - centerWidth);
centerWidth = minWidth;
layout.getUnitByPosition('left').set("width", leftWidth);
layout.getUnitByPosition('center').set("width", centerWidth);
}
}, layout, true);

This can be extended to cover layouts with both 'left' and 'right' cells. It can also be converted to set a minimum height for the 'center' cell.

No comments:

Post a Comment