Creating a floating scrollbar in Flex

Question

I'm trying to create a floating horizontal scrollbar that will follow the screen as the user scrolls vertically. I have a datagrid that is not scrollable vertically, but horizontally (there's a lot of columns). The container that the grid is in is scrollable vertically. Right now when the user wants to scroll horizontally, they have to go all the way down to the bottom of the page, scroll left/right, then go back up to where they were.

What I'd like to do is having the horizontal scroll bar on the grid float along the grid as they scroll up and down, so it will be visible at all times. Any ideas how this can be done?

Why is it in a Panel that scrolls vertically? I'd make the datagrid as big as its container and just have it scroll both ways. — RIAstar

Mike Petty Mike Petty · Accepted Answer · 2012-05-30T21:03:49

This sort of thing was somewhat common with the constraint system from Halo, so I wouldn't be all that surprised if there were still artifacts of this left over in various spots. Essentially what happens is the control in question doesn't really understand that it's part of a constrained container and that it should fit within those bounds, instead it maximizes the container to make the container fit to itself (which is why you'd have to scroll to the maximum vertical -usually of the container to see the horizontal scroll -of the control).

In cases like this, a common work around was instead of setting the offending metric (ie width, height) to a percent layout, we would typically bind it to it's immediate parent or something similar.

Ex (psuedo-code):

<HGroup id="hgroup" width="100%" height="100%">
    <DataGrid height="{hgroup.height}" .... />
</HGroup>

I'd try to fix the offending part first though, one thing to try is to turn off scrolling for the container, and allow the control to scroll.

Creating a floating scrollbar in Flex

1 Answers