10

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?

5 Answers 5

15

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

5
  • Wonderful. I've struggled with this for ages - thanks for the pointer. Mar 31, 2009 at 20:16
  • This only works when the canvas has an explicit height. What if it has percentage-based height?
    – bug-a-lot
    Jun 16, 2009 at 16:26
  • @bug-a-lot I just implemented this for a canvas that has a percentage height and it worked perfectly.
    – Herms
    Apr 21, 2010 at 16:01
  • Just noticed that this is finally fixed in Flex 4.
    – Yaba
    Mar 3, 2011 at 15:22
  • This one didn't work for me when I changed the application size after creation. I fixed this by having that policy-setting code called as part of the updateComplete event. Perhaps setting it in an updateDisplayList() override would be more appropriate however.
    – Opux
    Sep 24, 2014 at 18:00
4

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"

2
  • Then it is still a bug. I have set both height and width percentage based. Yet it does not resize the content, when the scrollbar is shown.
    – Yaba
    Nov 17, 2008 at 15:53
  • They way I understand that excerpt is that by setting the width to a percentage value and not setting the height at all, the component itself will resize when the scrollbar is shown, not the content. This still may not apply to your specific situation, though.
    – hasseg
    Nov 17, 2008 at 21:21
3

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.

2

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>
0

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 "+".

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.