Flex DataGroup setting the height of the item renderer

Question

I've been playing around with renderers the last few days for a mobile application. I'm creating a gridlike renderer that has columns that is light weight for a mobile app. It is a bit of a poor man's datagrid. The layout is fine. The question I have is controlling the height of each row in the list.

When measure() is called, I set the measuredHeight to:

  measuredHeight = getElementPreferredHeight(ld) + verticalPadding; 

where vertical padding is:

  var verticalPadding:Number = getStyle("paddingTop") + getStyle("paddingBottom");

When I debug on the desktop, the measuredHeight is set to 12 and on the device (Motorola Atrix), it is set to 12.

But when layoutContents is called, the unscaledHeight is a number much larger than my measuredHeight value (44 on the device, 66 when running on the desktop), resulting in more vertical whitespace surrounding each item than I care to have.

I'm certain I'm missing something but how do I control that row height? I happen to be using a Datagroup for this particular example but in some playing around I did with just a simple list, I had the same issue. Somewhere the system is overriding my measuredHeight with some other value.

Any ideas?

Randy

Answer 1

Are your code segments part of the renderer or part of the DataGroup? Or somewhere else?

In Flex, a parent is always responsible for sizing it's children. In the case of renderers, the DataGroup is the parent and the renderer instances are the children. So, no matter what sizing you specify in the itemRenderer, it may not be used. measuredHeight and measuredWidth are just suggestions which the parent container can choose to ignore--or not--based on it's implementation.

You can use typicalItem to help calculate the default row sizing.

You could also create a custom layout class to size and position your children.

When using a VerticalLayout , the width is fixed unless you set variableRowHeight to true. More Info in the docs . You can also set the rowHeight property on the layout class to specify the height for all rows.