Remove white box at bottom right corner of containers when scroll bars are visible

Follow Adobe Cookbooks on Twitter

Avg. Rating 4.0

Tags:

Problem

When a container ( ie. Box, VBox, HBox, Canvas, etc ) has a background color other than white and both horizontal and vertical scroll bars are visible, a white box is displayed at the bottom right corner of the container. This box cannot be styled.

Solution

We need to find the whiteBox in the Container class and override its styling.

Detailed explanation

The following code is the only way to remove the white box that shows up at the bottom right corner of the container when both vertical and horizontal scroll bars are present. The whiteBox is HARD CODED into container class and this is the only way to get rid of it visually.

Do not attempt to remove whiteBox since it is used for position calculations for the scroll bars.

override public function validateDisplayList():void
  {
     super.validateDisplayList();
      var i:int = rawChildren.numChildren;
      while ( --i > -1 )
      {
         var obj:DisplayObject = rawChildren.getChildAt( i );
         if ( obj.name == "whiteBox" )
         {
             var whiteBox:Shape = obj as Shape;
             whiteBox.graphics.clear();
             break;
           }
       }
   }

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.