Flex: Prevent scrollbar from covering content when automatically displayed

Question

I have a canvas in Flex that shall be able only to be scrolled in vertical direction, so I set the attributes of the canvas as follows:

verticalScrollPolicy=         


        

Answer 1

I'm, too. I usually have some problems with the verticalScrollBar in Flex, so I prefer to use the browser's scrollbar for scrolling the complete application. You can found a workaround here: How to Resize the Flex Stage and Use the Browser Scrollbar.

The code I use:

In Flex:

ExternalInterface.call("setInitialFlashHeight", this.height);

In my HTML (JavaScript):

function setInitialFlashHeight(newHeight) {
    document.getElementById('my_flash').style.height = newHeight + 'px';
}

And if you want to add (or remove) some height:

function addFlashHeight(height) {
    var divHeight;
    var obj = document.getElementById('my_flash');

    if (obj.offsetHeight) {
        divHeight = obj.offsetHeight;
    } else if (obj.style.pixelHeight){
        divHeight = obj.style.pixelHeight;
    }

    var newHeight = divHeight + height;
    document.getElementById('my_flash').style.height = newHeight + 'px';
}

To remove, you use "-" instead of "+".

Answer 2

I had to find this workaround Flex ScrollPolicy.AUTO Not Good Enough which solved this issue, because Flex verticalScrollPolicy bug workaround did not work for me.

Answer 3

It's a bug. See Flex verticalScrollPolicy bug for a workaround.

Answer 4

on vbox or another component based on Container, i solved that problem like that.

Wrong:

<mx:VBox width="100%" height="100%"
      verticalScrollPolicy="auto" horizontalScrollPolicy="off">
     <mx:Repeater dataProvider="{hede}">
          <custom:RenderItem ........../>
     </mx:Repeater>
</mx:VBox>

there is no scroll bar

Working version:

<mx:VBox width="100%" height="100%"
    **minHeight="1"** horizontalScrollPolicy="off">
    <mx:Repeater dataProvider="{hede}">
        <custom:RenderItem ........../>
    </mx:Repeater>
</mx:VBox>

Answer 5

Just a side note regarding this issue: it's actually not a bug, but known (and intended?) behaviour:

"Flex considers scroll bars in its sizing calculations only if you explicitly set the scroll policy to ScrollPolicy.ON. So, if you use an auto scroll policy (the default), the scroll bar overlaps the buttons. To prevent this behavior, you can set the height property for the HBox container or allow the HBox container to resize by setting a percentage-based width. Remember that changing the height of the HBox container causes other components in your application to move and resize according to their own sizing rules."

-- From Sizing Components in the Flex 3 help, under "Using Scroll bars"