Question

I have a list component with a (row oriented) tile layout in a group that sits in the main Application.

I want the list to be centred vertically when there are not enough items in to fill the application window height, so verticalCenter=”0″.

However, when there are more items than can fit vertically on screen, the list expands beyond the application window height and the scrollbar doesn’t kick in.

I can remedy this if setting the list height to 100%, but that means it’s not vertically centred when it contains less items.

The ideal solution would be maxHeight=”100%”, but of course maxHeight doesn’t work with percentages. How would I go about achieving this behaviour?

Thanks,

Tim

Edit: Please see the code below:

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       applicationComplete="applicationCompleteHandler(event)"
                       width="800" height="600"
                       showStatusBar="false">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;

            protected function applicationCompleteHandler(event:FlexEvent):void
            {
                var arrayList:ArrayList = new ArrayList;
                for (var i:int = 1; i <= 50; i ++)
                {
                    arrayList.addItem(String(i));
                }
                list.dataProvider = arrayList;
            }

        ]]>
    </fx:Script>

    <s:List id="list"
            itemRenderer="itemRenderer"
            useVirtualLayout="false"
            horizontalCenter="0" verticalCenter="0"
            borderVisible="false">

            <s:layout>
                <s:TileLayout orientation="rows"
                              requestedColumnCount="4"
                              columnWidth="150" rowHeight="150"/>
            </s:layout>

        </s:List>


</s:WindowedApplication>

This is my item renderer:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">

    <s:Rect width="100%" height="100%">
        <s:stroke>
            <s:SolidColorStroke color="0"/>
        </s:stroke>
    </s:Rect>

    <s:Label text="{data}"
             horizontalCenter="0" verticalCenter="0" fontSize="50"/>

</s:ItemRenderer>

If the for loop is changed to only 10 iterations, the list is centred vertically on the screen. Otherwise the list expands beyond the screen, centred vertically and no scrollbar appears.

Using clipAndEnableScrolling hasn’t made any difference. I’ve also tried putting the list inside a group with 100% width & height, but I’m getting more or less the same behaviour except the list is flush to the top when it is taller than the container.

Answer 1

You can try something like this:

<s:List id="list" maxHeight="{list.height}" height="100%" />

You could also change the maxHeight value whenever it’s parent container changes sizes.

To get a complete answer, I think you’re going to have to show some code about how things are set up.