The height property on the AdvancedDataGrid was set to 100% and the variableRowHeight="true"; however, this was giving me grief: For whatever reason, the record at the bottom of the grid was cut off. And the scrollbar stopped a few steps before it could completely reach it. After some trial-and-error, two solutions emerged:
- Take the height property off completely and keep variableRowHeight="true".
- Or set the rowHeight to some value and set variableRowHeight="false". The trouble was, this meant all the rows would be the same height. Not very aesthetically pleasing.
Some research led me to this great blog by Brendon Wildbore. The solution was to use his code example along with the Degrafa SWC file in the project's lib folder. Instructions on downloading and installing the SWC can be found on the Degrafa web site. Following Brendon's example, I changed the CSS to look like this,
And the problem disappeared. The image now stays the same size. However, the image was too dark; a check of the values and it was clear that the background-blend: multiply; was the culprit. Changed it to normal and all is well.
The Degrafa library allows for much more than this. Check out their site to see the capabilities.