1

How to maximize a Callout, so that it takes the maximal available space at the screen?

I'm trying to display a ViewNavigator in a Callout and while it works, the displayed View is too narrow:

enter image description here

In the same program I have another Callout and it is wide enough:

enter image description here

The only 2 differences between them is that the latter is attached to a CalloutButton and the latter holds a custom Score component for which I set:

    override protected function measure():void {
        super.measure();
        measuredWidth = Capabilities.screenResolutionX;
        measuredHeight = Capabilities.screenResolutionY;
    }

I keep staring at the Callout.as code, but can't find a way to trick it to occupy most available space yet.

My custom mxml component is quite simple:

PlayerInfo.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Callout 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    contentBackgroundAppearance="none">

    <fx:Script>
        <![CDATA[
            [Bindable]
            public var userid:String;
        ]]>
    </fx:Script>

    <s:ViewNavigator 
        firstView="views.Profile"
        firstViewData="{userid}">
        <s:navigationContent>
            <s:Button label="Close" click="close()" />
        </s:navigationContent>
    </s:ViewNavigator>

</s:Callout>        
ketan
  • 19,129
  • 42
  • 60
  • 98
Alexander Farber
  • 21,519
  • 75
  • 241
  • 416

1 Answers1

1

Callout extends Container, so you shouldn't have problems setting the width and height to 100%.
Also, in the Callout code there's a method:

/**
 *  @private
 *  Force a new measurement when callout should use it's screen-constrained
 *  max size.
 */
private function invalidateMaxSize():void
{
    // calloutMaxWidth and calloutMaxHeight don't invalidate 
    // explicitMaxWidth or explicitMaxHeight. If callout's max size changes
    // and explicit max sizes aren't set, then invalidate size here so that
    // callout's max size is applied.
    if (!canSkipMeasurement() && !isMaxSizeSet)
        skin.invalidateSize();
}

So, try to set the 'explicitMaxWidth' and 'explicitMaxHeight' properties.

alekseyk
  • 133
  • 9
  • Actually I tried setting `width="100%"` on the `Callout` and/or `ViewNavigator` and this doesn't change anything. – Alexander Farber Dec 05 '12 at 19:59
  • 1
    Adding your workaround for the s:Callout component worked for me (update the PlayerInfo.mxml file): `override protected function measure():void { super.measure(); measuredWidth = Capabilities.screenResolutionX; measuredHeight = Capabilities.screenResolutionY; }` – alekseyk Dec 12 '12 at 19:40