4 Replies Latest reply on Aug 3, 2006 12:37 AM by keiron77

    containers widths as a percentage

    keiron77 Level 1
      I have been building my application using scripts so that I can import xml content into text areas, panels etc. What I want is to set my panel to be 100% so that it fills the space and if I move the HDividedBox it wont bring in a scroll bar. This works for a fixed width:

      myPanel.width = 700;

      But if i enter

      myPanel.width = 100%; or
      myPanel.width = "100%";

      It doesn't work. Any ideas?
        • 1. Re: containers widths as a percentage
          Level 7
          Try this sample...



          <?xml version="1.0"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

          <mx:Script>
          <![CDATA[

          import mx.controls.Alert;
          import mx.controls.listClasses.ListBase;

          [Bindable]
          public var cards: Array = [ {label:"Visa", data:1},
          {label:"MasterCard", data:2},
          {label:"American Express", data:3} ];

          [Bindable]
          public var selectedItem:Object;
          public function setValue(value_to_establish:String):void{
          var LB:ListBase=cb.dropdown;
          var number_of_elements:Number = LB.numChildren;
          for ( var x:Number=0; x<number_of_elements; x++ ) {
          if ( value_to_establish == cb.dataProvider[x]['label'] ){
          cb.selectedIndex = x;
          break;
          }
          }

          Alert.show('actual label: '+cb.selectedItem.label +
          "\nactual data: "+cb.selectedItem.data);

          }
          ]]>
          </mx:Script>
          <mx:HDividedBox width="100%" height="100%">
          <mx:Panel label='Panel 1'>

          </mx:Panel>
          <mx:Panel title="ComboBox Control Example"
          height="75%" width="100%" layout="horizontal"
          paddingTop="10" paddingBottom="10" paddingLeft="10"
          paddingRight="10">

          <mx:ComboBox id='cb' dataProvider="{cards}" width="150"
          close="selectedItem=ComboBox(event.target).selectedItem"/>

          <mx:VBox width="250">
          <mx:Text width="200" color="blue" text="Select a type of
          credit card."/>
          <mx:Label text="You selected: {selectedItem.label}"/>
          <mx:Label text="Data: {selectedItem.data}"/>
          </mx:VBox>

          <mx:Button label="change ComboBox value" click="setValue('MasterCard')"/>

          </mx:Panel>
          </mx:HDividedBox>
          </mx:Application>






          keiron77 escribi�:
          > I have been building my application using scripts so that I can import xml
          > content into text areas, panels etc. What I want is to set my panel to be 100%
          > so that it fills the space and if I move the HDividedBox it wont bring in a
          > scroll bar. This works for a fixed width:
          >
          > myPanel.width = 700;
          >
          > But if i enter
          >
          > myPanel.width = 100%; or
          > myPanel.width = "100%";
          >
          > It doesn't work. Any ideas?
          >
          >

          • 2. Re: containers widths as a percentage
            keiron77 Level 1
            This is part of my script:

            public function createSite():void {
            // make panel
            var myPanel:Panel = new Panel();
            myPanel.title = website.page.title[0];
            myPanel.width = 700;
            myPanel.height = 300;
            leftcanvas.addChild(myPanel);
            }

            As you can see the elements are dynamically created so I need to define it here. I will try css now and see if that will work (it might).
            • 3. Re: containers widths as a percentage
              inlineblue Level 1
              In AS, you have to use the percentWidth and percentHeight properties if you want percentages.
              • 4. Re: containers widths as a percentage
                keiron77 Level 1
                Thanks for the reply - I have just found that myself!