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.
Related
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.
I have to add * mark for required fields in my application. I have done this by the code
<mx:VBox>
<mx:Form>
<mx:FormItem label="Name" required="true">
<mx:TextInput id="Name" width="200" editable="true"/>
</mx:FormItem>
<mx:FormItem label="priority" required="true">
<mx:ComboBox id="priorityId" width="200" cornerRadius="4" dataProvider="{customerPriorityList}" />
</mx:FormItem>
</mx:Form>
<mx:VBox>
but the problem is that the * mark comes near the text input field or near the combo box. But i want that * mark near the label only as per my application.
I tried my best but failed.
Is there any way???
Thanks in advance...
try this one
<mx:Form width="30%">
<mx:HBox horizontalGap="0">
<mx:Label text="First Name"/>
<mx:Label width="11" color="0xFF0000" text="*"/>
<mx:Spacer width="20"/>
<mx:TextInput/>
</mx:HBox>
</mx:Form>
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?
I have a combobox with a width set to 100%. However, when one of its elements is larger, the combobox grows larger aswell, creating scrollbars and other uglyness in my app!
How do I keep the combobox contained within its parent?
NB it's OK if the list that drops down is larger as long as the closed combobox stays smaller.
Sample:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<!-- I'm using a Canvas instead of a VBox because the VBox spaces the elements too far appart -->
<mx:HBox id="tagsHBox" width="{formsHBox.width - 16}" x="8" y="8">
<!-- This label should align with the labels in the left form -->
<mx:Label text="Tags" id="tabLabel" width="{titleTxt.x + 4}" textAlign="right" />
<!-- This textbox should spread accross both forms, that's why it's in a seperate HBox -->
<mx:TextInput height="20" width="100%" />
</mx:HBox>
<mx:HBox id="formsHBox" x="8" y="{8 + tagsHBox.height}" width="{this.width-16}">
<mx:Form id="leftForm" width="50%">
<!-- Personal details -->
<mx:FormHeading label="Personal Details" width="100%" />
<mx:FormItem label="First name" width="100%">
<mx:TextInput text="{person.firstName}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Last name" width="100%">
<mx:TextInput text="{person.lastName}" width="100%"/>
</mx:FormItem>
<!-- And 15 more formItems :) -->
</mx:Form>
<mx:Form id="rightForm" width="50%">
<!-- Address -->
<mx:FormHeading label="Address" width="100%" />
<mx:FormItem label="Street" width="100%">
<mx:TextInput text="{person.address.street}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="City" width="100%">
<mx:TextInput text="{person.address.city}" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Country" width="100%">
<!-- This combobox right here is the troublemaker. There's a
country named 'South Georgia and the South Sandwich
Islands' consising of a few small islands in the southern
pacific and a name which is too long for my innocent
unsuspecting combobox -->
<form:ComboBox id="countryCombo" height="20" width="100%"
dataProvider="{model.systemDataModel.countries}" />
</mx:FormItem>
<!-- And 15 more formItems :) -->
</mx:Form>
</mx:HBox>
</mx:Canvas>
You might be able to use minWidth instead. Set it to zero or some other low value. I know it works with containers like HBox and VBox to make them stop growing larger than their parent container, so it might work with ComboBox too. Basically, what happens is that minWidth="0" overrides the measuredMinWidth, which is a value that the parent container normally respects as the minimum possible size, and it may be bigger than the container's own bounds.
I had the same issue and I solve it easily. I had a country comboBox and a state comboBox components and dynamically filled with country names and the other with states related... I had two forms inside an HBox to show "two columns like" forms and inside the right side form there was a formItem and inside the formItem the comboBox. The problem was when I gave the comboBox its dataProvider then scrollBars appeared and it was very disgusting...
The solution: I show you just the right form because it was the problem (autoLayout="false" in Form and minWidth="0" in ComboBox definition)
<mx:Form autoLayout="false" verticalGap="12">
<mx:FormItem label="Country" required="false" width="100%" direction="vertical">
<mx:ComboBox id="countryComboBox" minWidth="0" width="100%" labelField="#name"/>
</mx:FormItem>
<mx:FormItem label="State" required="false" width="100%" direction="vertical">
<mx:ComboBox id="stateComboBox" minWidth="0" width="100%" labelField="#name"/>
</mx:FormItem>
</mx:Form>
You can use the maxWidth attribute with an absolute size (in pixels) however part of the combobox items ( which are larger then the combobox ) will be cropped .
from adobe :
combobox default size :
Wide enough to accommodate the longest entry in the drop-down list in the display area of the main control, plus the drop-down button. When the drop-down list is not visible, the default height is based on the label text size.
I have a TextInput and a Canvas object both inside an HBox object. When the input text field has focus it highlights, I would like to change this to be the containing HBox that highlights when the Input Text has focus.
Does anyone have any ideas on how I can do that?
Here is my code:
<mx:HBox
keyDown="checkKey(event)"
horizontalGap="0">
<mx:TextInput
id="searchBox"
width="500"
fontSize="25"
backgroundColor="#F0F0F0"
borderThickness="2"
borderColor="#666666"
borderStyle="solid"/>
<mx:Canvas
borderThickness="2"
borderColor="#666666"
borderStyle="solid"
backgroundColor="#666666">
<mx:Button
label="Search"
click="searchInputText()"
fontSize="21"
styleName="primaryButton"/>
</mx:Canvas>
</mx:HBox>
Thanks!
I don't think HBoxes have highlighting enabled by default. But you could make the HBox respond to the focusIn event: Setting the filter's alpha to 0 makes it completely transparent.
<mx:HBox
name="parentHBox"
keyDown="checkKey(event)"
horizontalGap="0">
<mx:filters>
<mx:GlowFilter alpha=0.0>
</mx:filters>
<mx:TextInput
id="searchBox"
...
focusIn="{HBoxGlowFilter.alpha = 1.0}"
focusOut="{HBoxGlowFilter.alpha = 0.0}"/>
<mx:Canvas
...>
<mx:Button
label="Search"
click="searchInputText()"
fontSize="21"
styleName="primaryButton"/>
</mx:Canvas>
</mx:HBox>
Hope this helps.