1 Reply Latest reply on Nov 7, 2008 8:53 AM by -Hob

    dynamic sizing of buttons

    kilyas22
      I am working on a flex application where I want the button sizes to appear based on the size of the browser window and the resolution of the screen so I don't want to hard code the width of the buttons.

      <mx:Button id="submitButton" label="SQL" styleName="navButtonSkin"
      width="80" textAlign="center"/>

      <mx:Button id="submitButton1" label="SQL1" styleName="navButtonSkin"
      width="80" textAlign="center"/>


      But when I change it to:-

      <mx:Button id="submitButton" label="SQL" styleName="navButtonSkin"
      width="20%" textAlign="center"/>

      <mx:Button id="submitButton1" label="SQL1" styleName="navButtonSkin"
      width="820%" textAlign="center"/>
      It doesnt seem to work.

      Now if I change it to

      <mx:Button id="submitButton" label="SQL"
      width="{getButtonWidth()}" textAlign="center"/>

      and have a function:-
      private function getButtonWidth():int{
      var w:int = 15/100*summaryPanel.width;
      return w;
      }
      where summaryPanel is a container holding the buttons, thats failing as well since in this case the summaryPanel.width always turns out to be zero at the time when the button sizes are calculated. What else can I do and how can I work around it?
        • 1. Re: dynamic sizing of buttons
          -Hob Level 1
          Try doing the calcualations in-line. getButtonWidth() is a function, and thus hard to bind to.

          <mx:Button id="submitButton" label="SQL"
          width="{15/100*summaryPanel.width}" textAlign="center"/>

          Since summaryPanel.width is reference directly in the binding, the compiler will automatically adjust the button's width for you whenever summaryPanel's width changes.