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="auto" horizontalScrollPolicy="off"

The problem here is that the vertical scrollbar covers the content when it appears - altough there is enough horizontal room left. I would have expected that the content size would have been automatically adjusted.

When setting the vertical scroll policy to "on", no content is covered also.

In case I set both scroll policies to 'auto' I also get a horizontal scroll bar just for scrolling to the area that is covered by the vertical scroll bar.

Is there a workaround how I can relayout the content of the canvas when the vertical scroll bar is shown so that it does not cover any content?

Answer 1

it's a bug .. see here for a workaround

Answer 2

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"

Answer 3

Hi,

i'm, too, i've usually 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 work around here : a good blog

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 fi 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 "+", of course .....

Answer 4

Still have a small Issue.

Flash Builder throws the following error when I plug it in (compiling to Flex 3.5):

1120: Access of undefined property ScrollPolicy