Fixing the height of YUI grid nested columns

Usage

This script changes the DIVs inside a nested YUI grid to all have the same height.

To fix the height of your nested YUI grids simply include the yuigridcolumnfix.js file with a script element at the end of your document's body. The script needs YUI Dom and YUI YAHOO to work, so make sure to include these aswell.

The script automatically detects nested grids and fixes the height of all nested columns. If you don't want this to happen assign a class of columnfix to the nested grids you want fixed.

Manually fixing nested grids

The fix() method is public which means that if you want to fix a nested grid by hand (for example after loading content via Ajax) you can call YAHOO.util.grids.columnfix.fix(grid), where grid needs to be the DOM reference of the nested grid to be fixed.

Download

You can download the column fixing script here and see the source of this page for an example how it works. Simply roll over the columns in the following first and last grid to see that all the columns are the same height.

Examples