Horizontal scrollbar hides content of ApplicationControlBar

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 开发者_JS百科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!

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).

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.

I had this come up today and I slightly tweaked sri's if statement like this:

if (buttonContainer.horizontalScrollbar)
{
    // Change height & style properties
}
else
{
    // Return to original properties.
}