Is there a way to position a component in flex that is fixed?

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>

Answer 2

I have not seen any box container with true CSS style fixed positioning in Flex. Some Flex elements can use absolute positioning (Canvas, Application or Panel with layout="absolute") and then you could place the VDividedBox on a layer beneath the absolutely positioned toolbar, which could give the illusion of a fixed toolbar.

You may want to look at the Javascript external interface api to create a toolbar that lives outside of Flex and use that to control some of your Flex UI. You could pass coordinates to and from HTML and Flex using Javascript to tell your HTML toolbar where to position itself over the Flex SWF.