I've got FormItems with labels, and I'd like for the label to appear on top of the textinput within it rather than to its left, but I don't know where I need to go or what CSS I need to set this.
<mx:Form id="myform" defaultButton="{BtnSave}">
<mx:FormItem label="MyData" required="true">
<s:TextInput id="dataTextInput" text="{data}"/>
</mx:FormItem>
</mx:Form>
I don't think this is possible w/ MX Forms. I guess in theory you could do something like this:
<mx:Form id="myform" defaultButton="{BtnSave}">
<mx:FormItem required="true" direction="vertical">
<s:Label text="MyData" />
<s:TextInput id="dataTextInput" text="{data}"/>
</mx:FormItem>
</mx:Form>
But, If you're going to do that then why bother using the form in the first place?
Related
I have a mx:Form containing two FormItems. By default the FormItems are placed vertically one on top of the other but due to space constraints I want to place the two FormItems side by side. How can I do it? Another option that I had was to use just the plain label and text fields but I want to make use of the features that the mx:Form container offers.
I have the following code that places the data vertically:
<mx:HBox width="100%"
horizontalAlign="center">
<mx:Label text="Info"/>
</mx:HBox>
<mx:Form id="InfoForm">
<mx:FormItem label="Info1"
horizontalAlign="center"
paddingLeft="45"
required="true"
direction="vertical">
<mx:TextInput id="Info1TextInput"/>
</mx:FormItem>
<mx:FormItem label="Info2"
horizontalAlign="center"
paddingLeft="45"
required="true"
direction="vertical">
<mx:TextInput id="Info2TextInput"/>
</mx:FormItem>
</mx:Form>
Thanks a lot!
Well, how I achieved it using 2 Forms. side by side in horizontal layout. Hope this helps.
I have a form that looks like the following:
<mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Panel horizontalAlign="center"
title="{resourceManager.getString('Resources','views.login.title')}"
verticalAlign="middle">
<mx:Form id="loginForm" defaultButton="{loginButton}">
<mx:FormItem label="{resourceManager.getString('Resources','views.login.ip')}">
<mx:Label id="url" text="{url}"/>
</mx:FormItem>
<mx:FormItem label="{resourceManager.getString('Resources','views.login.username')}"
required="true">
<mx:TextInput id="username"/>
</mx:FormItem>
<mx:FormItem label="{resourceManager.getString('Resources','views.login.password')}"
required="true">
<mx:TextInput id="password" displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:FormItem direction="horizontal" width="100%" horizontalAlign="right" paddingBottom="2" paddingRight="2">
<mx:Button id="loginButton"
label="{resourceManager.getString('Resources','views.login.loginBtn')}"/>
</mx:FormItem>
</mx:Panel>
</mx:HBox>
The behavior I experince some times (not always) is when I tab from username to password and then try to hit "Enter" the Botton's click callback does not get called. If I click on the label (id is "url") then go into any of the textboxes, "Enter" key works just fine. I am assuming that the form somehow keep loosing focus. I would appreciate any idea about solving this problem.
I experienced the same issue recently, did you find the root cause? I found a workaround is set the form defaultButton in creationComplete handler instead of on the mxml tag. I saw this issue in Flex4.1, I don't see it in Flex 3.6. I haven't try flex 4.6 though.
for some reason my code is not having the desired effect of having labels to the left of the textinput fields*(like in nearly all normal scenarios with forms). The labels are appearing above the textinput fields. I would also like to make some of them read only. Any advice much appreciated
Basically what i have is text sitting above the textbox instead of alongside it to the left.
Here is my code:
<mx:VBox width="100%" height="100%">
<mx:HBox>
<mx:FormItem textAlign="left" <mx:Label text="TEST" textAlign="left" fontSize="14" fontWeight="bold"/>
<mx:TextInput enabled="true" textAlign="right"/> </mx:FormItem>
Use the label field of the formitem.
<mx:FormItem textAlign="left" label="TEST" fontSize="14" fontWeight="bold"/>
<mx:TextInput enabled="true" textAlign="right">
</mx:FormItem>
If you want read-only, then you can put editable="true|false" in the TextInput.
I have a fairly straightforward Flex layout question.
Is there anyway to get FormItem's contained within a nested container to follow the alignment of the FormItem's in in the parent form container?
For example:
<mx:Form>
<mx:FormItem label="This is a long label" id="formItem1">
<mx:HBox>
<mx:TextInput />
</mx:HBox>
</mx:FormItem>
<s:BorderContainer>
<mx:FormItem label="ShrtLbl" id="formItem2">
<mx:HBox>
<mx:TextInput />
</mx:HBox>
</mx:FormItem>
</s:BorderContainer>
</mx:Form>
In this case I would like the label for both formItem1 and formItem2 to have to the same width which would be the case if defined as follows:
<mx:Form>
<mx:FormItem label="This is a long label" id="formItem1">
<mx:HBox>
<mx:TextInput />
</mx:HBox>
</mx:FormItem>
<mx:FormItem label="ShrtLbl" id="formItem2">
<mx:HBox>
<mx:TextInput />
</mx:HBox>
</mx:FormItem>
</mx:Form>
Any thoughts?
The Spark Form Skin uses the spark.layouts.FormLayout to control the layout of its children.
From the FormLayout source:
The FormLayout class defines the default layout for Spark Form skins.
FormLayout provides a vertical layout for the child FormItem containers in the Form.
If any of the child containers uses a FormItemLayout, FormLayout will
align the ConstraintColumns of each child.
Therefore the Layout does not look at any nested children of the form.
I would recommend creating your own custom form layout to handle your case.
oops, I see you're using the mx:FormItem not the s:FormItem. I would recommend using the spark variants.
Furthermore, there is no need to have an mx:HBox (or s:HGroup) inside a FormItem.
I have the following MXML:
<mx:State name="myState">
<mx:AddChild relativeTo="{myhbox}" position="after">
<mx:Box verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
<mx:Form id="myForm" width="479" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:FormItem label="My Label:" fontWeight="bold" id="myLabel" direction="vertical">
<mx:TextInput id="myTextInput" width="282" />
<mx:HBox>
<mx:Button label="Go" click="go();" id="goButton" />
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:Box>
</mx:AddChild>
</mx:State>
How do I set focus on the TextInput field using <mx:SetProperty/>? I've tried the following, but it only results in the field being highlighted -- the cursor does not appear in the TextInput:
<mx:SetProperty target="{stage}" name="focus" value="{myTextInput}"/>
Long story short, I want the cursor to appear in the field.
UPDATE: I figured it out. See comments for solution.
I try to avoid using the AddChild state tag. It's usually better to put all that in a component, and use SetProperty to set visible and includeInLayout when you want it to display.
You can always override visible in your custom component to set the focus to the field. Or create a custom setter than does the same thing
public function set show(value:Boolean):void
{
visible = true;
includeInLayout = true;
if (value)
myFunctionThatSetsTheFocus();
}
Add a "creationComplete" to the TextInput and had it call a method that setFocus on the TextInput