Horizontal scrollbar hides content of ApplicationControlBar

Question

I have an application control bar at the bottom of my Flex application (with attributes width="100%", dock="false", left="0", bottom="0", height="50"). It contains a lot of elements (like buttons and labels). The width of the SWF is the width of the browser.

When the user makes the width of the browser window smaller, after a certain point, the components on the application control bar gets "squished": they are forced on top of each other. And so, it becomes confusing and ugly. To ensure that that doesn't happen, I've set the minWidth attribute to a value so that it'll always display the components without them overlapping each other.

But then, a horizontal scrollbar appears and hides the bottom half of the application control bar.

I've googled and I found this article: flex verticalscrollpolicy bug (referenced by this SO question: Flex: Prevent scrollbar from covering content when automatically displayed).

But that seems to apply only to a fixed size component. My component's width is a percentage. Any ideas on how to have the horizontal scrollbar appear and have it not cover up the application control bar?

Thanks!

Answer 1

See if adding the following code to the overriden validateSize method (as in the scrollpolicy bug page you linked to) solves the problem.

if (width < measuredWidth)
{
  height = normal-height + height-of-the-horizontal-scrollbar;
}
else
  height = normal-height;

(Find the normal height of the application control bar and the scroll bar (trace them out) and use those values).

Answer 2

So this happens when the ApplicationControlBar is fixed at the bottom: bottom=0 and left=0. The easiest solution is to make the bar a lot taller (that'll push the content way higher than the scrollbar height). But that makes it kinda ugly.

So another solution: in the MXML file, I capture the Resize event. And in that function, I do this:

if (width < bar.minWidth) // width is the width of the SWF
{
    bar.height = ORIGINAL_SIZE + 10;
    hbox.setStyle("verticalAlign", "top");
    hbox.setStyle("verticalCenter", -10);
} else {
    // normal case
    box.height = ORIGINAL_SIZE;
    hbox.setStyle("verticalAlign", "middle");
    hbox.setStyle("verticalCenter", 0);
}

And the horizontal scrollbar doesn't hide the content anymore! Also, the Resize event doesn't get triggered when the bar has a minWidth & the width of the stage is less than that.