View Full Version : Help with "auto"-height rows displaying images

27 Sep 2006, 1:56 AM

just upgraded to .32. I'm using the grid to do some photo selection, so I'm displaying a picture in the first column (just an img tag). With .31 the row height would be adjusted to the height of the image. With .32 it is fixed height. In my UI you can use a slider to set the image height (I'm just setting the pixel height of the image tag)

How would I go about bringing the "auto height" feature back into my UI with yui-ext .32? I've tried to adjust .ygrid-col and .ygrid-row height to 100% to use dynamical sizing, didn't have the expected effect... (cuts off)

Or maybe some other way the grid rows could adjust to variable column content like multiline text or images?



27 Sep 2006, 4:56 AM
The row height can be adjusted with CSS. Unfortunately all rows are the same height. I didn't think auto-height rows ever worked, but obviously you had it working.

The rows and columns are positioned now. This ensures the headers and columns always line up and allows for fixed columns, moving columns and hidden columns. Row positioning was a step in preparing for sparse row population and loading via the scrollbar. But it wouldn't matter, with an static positioned row and absolute positioned cells, the cells would just overflow the row, not cause it to grow to fit.

This is a valid issue though. I started an example mashup using Yahoo! Shopping and their product images but the images are all different heights and the rows were all the same height so it looked terrible. I would like to create another GridView, one that is less complex and would be more flexible for any kind of content. It's definitely possible, time is the only issue.

29 Sep 2006, 1:39 AM
After fooling around with it a bit, I have this unofficial solution for you. It's only been tested in IE & FF.

1. Add "ygrid-simple-view" css class to your container element.

2. Add this to grid.css:

.ygrid-simple-view .ygrid-col{
height:100% !important;
.ygrid-simple-view .ygrid-row{
display: table-row;

3. Somewhere in your included script, before creating your grid you will need this:

YAHOO.ext.grid.GridView.prototype.updateBodyHeight = function(){}

This produces auto-height rows .31 style. One thing to note, it breaks getCellAtPoint() so dropping something on a specific row/cell will not work. I will explain getCellAtPoint in Drag and Drop part 2 post coming soon.


26 Oct 2006, 2:29 PM
Hi Jack,
I tried the fix for row height you provided in the post. It works on I.E 6 and up. However, it doesn't work in Firefox browser. Any idea on how to make this work? Thanks


30 Oct 2006, 10:57 AM

I had the opposite result to Christian. (e.g. works on Firefox 1.5 but no IE 6).

height:100% !important;


.ygrid-simple-view .ygrid-row

in the css made it work for both.


6 Dec 2006, 12:20 PM
I tried the fix in FireFox 2.0, with 33.RC3, and it didn't work. I noticed that grid.css already has at the end the two definitions for .ygrid-simple-view .ygrid-col and .ygrid-simple-view .ygrid-row. After I added
YAHOO.ext.grid.GridView.prototype.updateBodyHeight = function(){alert('test')}; just before grid1 = new YAHOO.ext.grid.Grid(...), the grid becomes empty. The alert does fire up, and FireBug showed no errors.

I'm trying to display multi-line cells, that is, have text wrap in cells as it would in <td>...</td>. I tried commenting out all "white-space: nowrap;" in grid.css, but obviously that didn't work.

How can one control wrapping in cells? This would indeed make rows have different heights. Is it at all possible?