flex - How to align the formItems? -
i'm trying create form, having issues aligning formitems.
this mx:form namespace. (xmlns:mx="http://www.adobe.com/2006/mxml")
does have suggestions on how correct this. appreciated.
<mx:vbox paddingleft="0" height="100%"> <form:form width="100%" textalign="left"> <mx:vbox> <mx:hbox id="snapshotselect"> <form:formitem label="my label here" includeinlayout="{model.formitemvisible}" visible="{model.formitemvisible}"/> <mx:vbox> <form:formitem includeinlayout="{model.formitemvisible}" visible="{model.formitemvisible}"> <components:sagetextinput textalign="left"/> </form:formitem> <form:formitem label="" visible="{model.formitemvisible}" includeinlayout="{model.formitemvisible}"/> <form:formitem visible="{model.formitemvisible}" includeinlayout="{model.formitemvisible}"> <components:sagelist id="snaps" allowmultipleselection="false" width="200" rowcount="5"/> </form:formitem> </mx:vbox> </mx:hbox> <mx:hbox> <form:formitem label="my label here" width="100%" visible="{model.formitemvisible}" includeinlayout="{model.formitemvisible}"/> <form:formitem label="" width="100%"> <components:sagecombobox dataprovider="{model.generations}" textalign="left" enabled="{model.generations.length > 0}"/> </form:formitem> </mx:hbox> <mx:hbox id="radioselectgroup"> <form:formitem label=""> <components:sageradiobuttongroup id="rbgroup" groupid="rbgroup" labelplacement="right"/> </form:formitem> </mx:hbox> <mx:hbox id="radionew"> <form:formitem> <components:sageradiobutton id="radiocopy" value="{model.radio_create}" group="{rbgroup}" labelplacement="right" width="250" label="radio button 1" /> </form:formitem> <form:formitem> <components:sagetextinput textalign="left" enabled="{rbgroup.selectedvalue == model.radio_create}"/> </form:formitem> </mx:hbox> <mx:hbox id="radioexisting"> <form:formitem> <components:sageradiobutton id="radionocopy" value="{model.radio_use_existing}" group="{rbgroup}" labelplacement="right" width="250" label="radio button 2"/> </form:formitem> <mx:vbox> <form:formitem label="" paddingbottom="0"> <components:sagetextinput textalign="left" enabled="{rbgroup.selectedvalue == model.radio_use_existing}"/> </form:formitem> <form:formitem label="" indentationlevel="0" paddingtop="0"> <components:sagelist allowmultipleselection="false" width="200" rowcount="5" enabled="{rbgroup.selectedvalue == model.radio_use_existing}"/> </form:formitem> </mx:vbox> </mx:hbox> </mx:vbox> </form:form> </mx:vbox> it looks @ moment.
but want this
use following code : please adjust width of spacer according alignment requirements. dont miss out mentioning width of every hbox , vbox inside formitem. here, using mx components.
<mx:form> <mx:formitem width="100%"> <mx:vbox id="containervbox" width="100%"> <mx:hbox width="100%"> <mx:label id="label1" text="my label here"/> <mx:spacer width="10%"/> <mx:textinput id="textinput1" text="this text input 1"/> </mx:hbox> <mx:textinput id="textinput2" text="this text input 2"/> </mx:vbox> </mx:formitem> <mx:formitem width="100%"> <mx:hbox width="100%"> <mx:label id="label1" text="my label here"/> <mx:spacer width="10%"/> <mx:combobox id="mycombobox"/> </mx:hbox> </mx:formitem> <mx:formitem width="100%"> <mx:hbox width="100%"> <mx:radiobutton id="myradiobutton"/> <mx:text text="radio button 1"/> <mx:spacer width="10%"/> <mx:textinput id="textinput3"/> </mx:hbox> </mx:formitem> <mx:formitem width="100%"> <mx:vbox width="100%"> <mx:hbox width="100%"> <mx:radiobutton id="myradiobutton"/> <mx:text text="radio button 2"/> <mx:spacer width="10%"/> <mx:textinput id="textinput4"/> </mx:hbox> <mx:textinput id="textinput5" text="this text input 5"/> </mx:vbox> </mx:formitem> </mx:form> </mx:vbox>
Comments
Post a Comment