Flex 2 and horizontal scrollbars

I was mucking about with viewing the flex unit converter at different screen sizes and noticed that when viewed at a size small enough to require a vertical scroll bar, a horizontal scroll bar would also appear. Basically the introduction of the vertical scrollbar adds 16 pixels to the entire movie, without first removing 16 pixels from the root components current width. I guess you can get around this by giving your root component a padding of 16, or adding the "horizontalScrollPolicy='off'" property to the application tag.

Is anyone aware of any other ways to remedy this behaviour?

13 thoughts on “Flex 2 and horizontal scrollbars”

  1. was surfing around for a unit converter, not for the example code but to well convert stuff and came across this page. Ironic that I happen to be just diving into flex myself. Anyway, just wanted to drop a line and say great app!

    brandon

    Reply
  2. I am having this same problem, its quite annoying that the flex components aren’t aware that the scrollbars take up some of the width or height and resize themselves automatically. I haven’t come up with a good work around yet.

    Reply
  3. although obviously that garbled it! try this:

    <mx:Canvas width=”100%” height=”100%” id=”optionsScrollCanvas”>
    <mx:VBox id=”bxPropertyList”
    width=”{(bxPropertyList.height > optionsScrollCanvas.height) ? optionsScrollCanvas.width-16 : optionsScrollCanvas.width}” />
    </mx:Canvas>

    Reply
  4. Just override the measuredHeight property in script:

    override public function get measuredHeight():Number{
    return (this.horizontalScrollBar)? (super.measuredHeight this.horizontalScrollBar.height):super.measuredHeight
    }

    Reply
  5. This seemed to work better for me at the root node, application level.

    import mx.core.Application;
    override public function get measuredWidth():Number{
    var out:Number = Application.application.width;
    if (Application.application.verticalScrollBar){
    out -= Application.application.verticalScrollBar.width;
    }
    return out;
    }

    Reply

Leave a comment