Question

Just like in HTML / CSS you can set the position of a div to be ‘fixed’ using css. For example, a header that is fixed at the top of the web page when the user scrolls down the webpage.

Is this possible in Flex?

I have had a look at the

VDividedBox

control which kind of does what I’m after but don’t like the ‘divider’.

Any ideas would be greatly appreciated.

Answer 1

Ok, so this is how I’m creating a fixed top component and a scrolling bottom component using the

VDividedBox

Setting the height of the second Box within the VDividedBox to “1” is the key. As long as there is some height value it works the way I want it. The other attribute of the VDividedBox is the verticalGap which I set to 3 to make the divider appear without the draggable image.

This is the code.

<mx:VDividedBox id="vDividedBox" verticalGap="3" width="100%" height="100%">
    <mx:VBox id="vBox1" width="100%" backgroundColor="haloGreen">                
            <mx:Button label="button"></mx:Button>                
    </mx:VBox>
    <mx:VBox id="hBox2" width="100%" backgroundColor="haloBlue" height="1">
            <mx:Box height="3000" backgroundColor="blue" width="100%" horizontalAlign="center">
                <mx:Label text="scrollable content" color="white" fontSize="20"/>       
            </mx:Box>
    </mx:VBox>        
</mx:VDividedBox>