Question

I’m using a list element with variableRowHeight and word-wrap set to true like in the example below:

http://blog.flexexamples.com/2007/10/27/creating-multi-line-list-rows-with-variable-row-heights/

When I scroll through the list with a mouse scrollwheel the text in the listItems also scroll. I know that this is to do with the height of the textField… but I am unsure how to best resolve this issue. Any thoughts are appreciated!

The issue that I am experiencing also occurs in the example above.

Answer 1

OK, solved it after a bit of work. Thought I would put it here for others:

This can be simply solved by extending the List element, and the ListItemRenderer and modifying a couple of lines:

First up, extend the List element:

package au.com.keeghan.controls {
    import mx.controls.List;
    import mx.core.ClassFactory;

    public class ExtendedList extends List{
        public function ExtendedList(){
            super();

            itemRenderer = new ClassFactory(ExtendedListItemRenderer);
        }
    }
}

Now we want to extend the newly created item renderer (ExtendedListItemRenderer). Because there isn’t actually that much code required, we can just put it in the same .as file. We do this by declaring it as a internal class, and locating it outside of the package above… just below the closing bracket:

import mx.controls.listClasses.ListItemRenderer;

internal class AsOneListItemRenderer extends ListItemRenderer{

    override protected function measure():void{
        super.measure();

        var w:Number = 0;

        if (icon)
            w = icon.measuredWidth;

        // Guarantee that label width isn't zero
        // because it messes up ability to measure.
        if (label.width < 4 || label.height < 4)
        {
            label.width = 4;
            label.height = 16;
        }

        if (isNaN(explicitWidth))
        {
            w += label.getExplicitOrMeasuredWidth();
            measuredWidth = w;
            measuredHeight = label.getExplicitOrMeasuredHeight();
        }
        else
        {
            measuredWidth = explicitWidth;

            label.setActualSize(Math.max(explicitWidth - w, 4), label.measuredHeight + 3);
            label.validateNow();
            label.height = label.textHeight + 5;
            measuredHeight = label.getExplicitOrMeasuredHeight() + 3;          

            if (icon && icon.measuredHeight > measuredHeight){
                measuredHeight = icon.measuredHeight;
            }
        }
    }
}

Now, the majority of the above code is actually just copied from the ListItemRenderer, the magic occurs down the bottom… specifically these lines:

label.setActualSize(Math.max(explicitWidth - w, 4), label.measuredHeight + 3);
label.validateNow();
label.height = label.textHeight + 5;
measuredHeight = label.getExplicitOrMeasuredHeight() + 3;

All I do here is add some height to both the label, and the overall measuredHeight which in the end is the thing that is causing this issue.

The only downside to this solution is that you will get a larger amount of padding below the listItem element, however you can still make this look good by playing around with the verticalAlign and padding css properties.