make textEdit fill the width in Flex 4.5

1
votes

how do I create a component in Flex 4.5 (using it for android..) that has a textInput and to its right a button, such that the button has fixed size and the textInput expands to fill the remaining space of the parent of the component?

this is the component..

<s:HGroup>
    <s:TextInput width="????"/>
    <s:Button width="37" height="37" />
</s:HGroup>

of course I don't know what to put in the width.. should I also specify a width for the HGroup?

4
androidactionscript-3apache-flexflex4
if I put 100% it overflows the width of the screen.. – luca

4 Answers

1
votes

Flex determines relative sizes based on the parent of the child.

If you don't give the parent group a width then the TextInput has no idea what it's supposed to be filling to 100%. 

<s:HGroup width="100%">
    <s:TextInput width="100%"/>
    <s:Button width="37" height="37" />
</s:HGroup>

As a side note in response to the "set them both to 100%" answers. Flex will allow you to set more than one percentage width to 100%. The 2 will end up being equally weighted. SO 

<s:HGroup width="100%">
    <s:TextInput width="100%"/>
    <s:Button width="100%"/>
</s:HGroup>

will result in 2 components which both take up half the screen. 

<s:HGroup width="100%">
    <s:TextInput width="200%"/>
    <s:Button width="100%"/>
</s:HGroup>

Will result in a TextInput which is twice as wide as the Button

If you want to set percentage based heights and width from ActionSript instead of MXML you need to say textInput.percentWidth = 100;

0
votes

Try this :

   <fx:Script>

        <![CDATA[
        import spark.components.Button;

        private function onCreate():void
        {
        var yourButton:Button = new Button();
        yourButton.width = 37;
        yourButton.x = 10;
        yourButton.y = 100;
        text.addChild(yourButton);
        }
]]>
    </fx:Script>

    <s:TextInput borderVisible="true" id="text" height="100%" width="100%" creationComplete="onCreate()" />
0
votes

Set the width of both the HGroup and the TextInput to 100%.

If you don't specify 100% width on the HGroup then it will be given a default, static width which might be wider than the width of your screen.

<s:HGroup width="100%">
    <s:TextInput width="100%" />
    <s:Button width="37" height="37" />
</s:HGroup>
0
votes
<s:HGroup width="100%">
  <s:TextInput width="width" />
  <s:Button width="37" />
</s:Group>

here 

width = [[android screen width (or group width) - 37 ] / android screen width (or group width) ] * 100

its in percentage..

or try setting both to 100%.. that maybe the problem.

EDIT:

just get your screen dimensions in your app.. Here is the link to the question .. How to get screen dimensions and here