Autoresizing Container with its elements based on Browser size in Flex
We have an Adobe Flex Application, in that we have some dynamic controls (like text control, Image control) on that container panel. When this application is loaded in Browser, based on the browser's height & width, the container is getting adjusted, because we have given the 100% for width & height. But the controls that is kept inside the container is not getting adjusted based on the size of the container panel. Please advise.
ASKER
I hope this code will make the components to match the exact width of the canvas. But my need is, we need to do it proportionately. For example, we have set the Canvas size as 100% and when I open that canvas in 1024 x 768 resolution monitor, it gets adjusted to that and in that canvas the textinput control width should be 80px, and if I open the same application in another monitor with resolution 1370x1024 then the textinput control width should automatically resized to 150px width. Even if I resize the browser the textbox control should also adjust matching to the height & width of the canvas proportionately. Please advise.
u can use 80% 70% if you don't want calculate manualy
ASKER
Oh ok. Will try and this input controls has autoresize option. So, can we use the % for that too? Eg. this control has option to move around the canvas and option to resize and rotate. If it is based on the % i hope the left & top position of the control will be same. but that should perform based on the size of the canvas. Please advice how to achieve this.
ASKER
The example URL is http://www.homestyler.com/designer and in this if you create a room and inside that room you can place a sofa and that soft will get adjusted based on the zoom. The same way we need to have it.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you for the help
Example:
<mx:Application width="100%" height="100%">
<mx:Canvas id="mycanvas" width="100%" height="100%">
<mx:TextInput width="100%"/>
<mx:TextInput width="{mycanvas.width}"/>
<mx:TextInput width="{width}"
All these TextInput controls should get the same size