Resizing widgets by % instead of pixels

mgiles86

I have found the block of code in my widget that controls the size of the widget window when the widget opens.

<viewer:WidgetTemplate id="wTemplate"
                                  height="600"
                                  width="320">

I have tried using % instead of absolute numbers to account for differences in screen sizes between users:

<viewer:WidgetTemplate id="wTemplate"
                                  height="90%"
                                  width="20%">

However this doesn't work, and the % sizes seem to be ignored (my widget is now 90 x 20 pixels). There must be a way to set widget sizes as a % of the flash window size...

DasaPaddock

Would setting left, right, top or bottom on the widget tag work for you?

See:
http://help.arcgis.com/en/webapps/flexviewer/help/index.html#/Widget_tag/01m30000001w000000/

If not, set the width and height on the widget itself and set the WidgetTemplate to 100%. You need to do it this way since setting the percent size means to set it as a percentage of its parent's size. The parent of the WidgetTemplate is the widget itself which usually doesn't have a size set on it.

Here's an example modification to the HelloWorldWidget.mxml:

<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"                    xmlns:s="library://ns.adobe.com/flex/spark"                    xmlns:mx="library://ns.adobe.com/flex/mx"                    xmlns:viewer="com.esri.viewer.*"                    width="50%" height="50%"                    widgetConfigLoaded="init()">     <fx:Script>         <![CDATA[             //this function called when the widget's configuration is loaded             private function init():void             {                 if (configXML) // checking for valid content in the configuration file                 {                     lbl.text = configXML.content || getDefaultString("helloContent");                 }             }         ]]>     </fx:Script>     <viewer:WidgetTemplate id="helloWorld"                            width="100%" height="100%">         <viewer:layout>             <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>         </viewer:layout>          <s:Label id="lbl"                  fontSize="18"                  fontStyle="italic"                  fontWeight="bold"/>     </viewer:WidgetTemplate> </viewer:BaseWidget>