Dynamic sizing of buttons

Question

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?

Answer 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.