I'm a new to Flex, and I'm trying to add a second label to a text box.
like this: Label [_______] label 2
So the first label will describe the text box and the second the unit, for example:
cost of cleaning [_______] $ per hour
Can I do this with a label inside the form item?
what I have tried looks like this:
<mx:FormItem label="cost of cleaning">
<mx:TextInput id="proSRO2YO" text="" width="120" maxChars="20"/>
<mx:Label text="dollars per hour"/>
</mx:FormItem>
but that results in a second label one line below, I need these on the same line.
Any help would be appreciated.
Use the direction property and set it to horizontal. the default is vertical.
<mx:FormItem label="cost of cleaning" direction="horizontal">
<mx:TextInput id="proSRO2YO" text="" width="120" maxChars="20"/>
<mx:Label text="dollars per hour"/>
</mx:FormItem>
Related
I have RadioButton, just one singular RadioButton not in a Group or anything like that. I set it's width to 100. I then give it a label which is much longer than 100px. Also, in the Skin for this RadioButton I have the Label just being a subclass of Spark Label in which I set the showTruncationTip of TextBase to true because that's the behavior I'm looking for.
So the Label should truncate, should it not? Instead, my label shows the entire thing not truncated at 100.
However, if I do the same exact thing but with a CheckBox, it works correctly.
Here's the MXML for my RadioButton:
<myNameSpace:RadioButton width="100" id="radBtn1" value="1" label="Yooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo o" />
And here is the relevant part in the Skin:
<s:HGroup width="100%" left="18" gap="5" y="{ icon.height === 0 ? 2 : -4}" verticalAlign="middle">
<myNameSpace:Icon id="icon"/>
<myNameSpace:Label id="labelDisplay"
textAlign="start"
verticalAlign="middle"
maxDisplayedLines="1"/>
</s:HGroup>
And just to show you that it's basically the same, here's my CheckBox Code:
<myNameSpace:CheckBox id="checkBox" width="100" label="Click here to turn this On"/>
And the Skin:
<s:HGroup left="18" right="0" top="3" bottom="3" verticalCenter="0" verticalAlign="middle" width="100%">
<myNameSpace:Label id="labelDisplay"
textAlign="start"
maxDisplayedLines="{getStyle('wrapLabel') ? -1 : 1}"
width="100%" />
<myNameSpace:Label id="readOnlyLabel" includeIn="readOnly"/>
</s:HGroup>
So what's going on? I even tried just doing this with a normal Spark RadioButton but even that won't truncate.
Edit:
Well from what I'm finding out from trial and error, it seems that mx RadioButton will truncate correctly, but Spark will not. My RadioButton extends from Spark so it also will not truncate.
So question now is: How can I make a Spark RadioButton's label truncate? As you can see from the Skin in the original post, I do have maxDisplayedLines set to 1, but it still won't show.
If you give the Label a width, it will truncate the text. Notice in your check box case, the label has width="100%", but there's no width in the radio button case.
I put a FormItem in a Form like below.
<mx:Form width="100%">
<mx:FormItem label="Context Aware" width="100%" backgroundColor="red">
<editorControls:CheckBox/>
</mx:FormItem>
</mx:Form>
There's gap between the actual content height and the form item boundary. Any idea on how to strictly fit the FormItem height to content?
This is Image:
The checkbox is actually a button with an image overlaid on it, as an icon. The icon is a box with some whitespace, as an image. You will have to create a new image which does not have whitespace, and replace the current icon. Remember that this applies to downstate and so on, so you will need a series of similar images. (cf., Adobe's Button docs example).
Of course, you will also have to set verticalGap and indicatorGap as well as paddingTop to 0, on the CheckBox, FormItem, and Form. (cf., Adobe's Flex help on Form, FormHeading, and FormItem layout containers, the section titled "Laying out forms").
Here is some sample code:
<mx:Form width="100%" backgroundColor="0x0000ff" verticalGap="0" paddingTop="0" indicatorGap="0">
<mx:FormItem label="Context Aware" width="100%" backgroundColor="0x00ff00" verticalGap="0" paddingTop="0" indicatorGap="0">
<mx:CheckBox verticalGap="0" paddingTop="0" icon="#Embed('cbIcon.gif')"/>
</mx:FormItem>
</mx:Form>
(If the answer is wrong, please let me know. If it is right, please check it as "correct".)
The following code display a list of comments using List control. The item height set to a fixed value (150), so it seems working: if the content is too long, the scrollbar shows...
However, what I really want is not to set the height but let it to change according to the content size. Is there any way to accomplish this?
<mx:List id="commentList" width="100%" dataProvider="{commentSet.commentArrayColl}"
rowCount="{commentSet.commentArrayColl.length}" >
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="150" >
<mx:Text text="{data.commentContent}" />
<mx:Text text="{data.username} ({data.modified})"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
EDIT:
To be more clear, I don't want to set the itemRenderer's VBox height to "150" or any other fixed value - but it'll only show one line of the text if I don't do it. So I'm looking for a way out of this. (If the VBox is not inside the itemRenderer, it'll auto ajust height as Text field string length grows - that's what I want.)
Add a height property that binds a function of dataProvider.length * 150:
<mx:List id="commentList" width="100%" dataProvider="{commentSet.commentArrayColl}"
rowCount="{commentSet.commentArrayColl.length}" height={commentSet.commentArrayColl.length*150}>
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="150" >
<mx:Text text="{data.commentContent}" />
<mx:Text text="{data.username} ({data.modified})"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
Try not setting the height on the VBox, and variableRowHeight to true on the list. Although I'm not sure how nice the List would play with that.
Alternatively, since you're not really using the advantage of itemRender recycling (because of rowCount = dataProvider.length) you might want to consider using a repeater instead of the list.
I have a comboBox and values like basic and advanced. And viewstack container conatains 2 grids.
When i select the base option in Combobox, the first grid has to be selected. select the advanced value in comboBox, the second grid has to be selected.
Please chck my below code and help me how to do it.
<mx:ViewStack id="viewstack1" width="95%" height="85%" x="0" y="63" >
<tables:KeyMetricsBasicTable basicArrayDataProvider="{basicArrayResult1}" width="100%" height="100%"/>
<tables:KeyMetricsAdvTable advArrayDataProvider="{advArrayResult1}" width="100%" height="100%"/>
</mx:ViewStack>
Thanks,
Ravi
Something like this:
<mx:ComboBox id="comboBox" change="{viewstack1.selectedIndex = comboBox.selectedIndex}" />
I have two questions.
How do I change the corner radius of a Label component in Flex. Tried applying style name, and the setStyle('cornerRadius',9) methods, but doesn't work.
How can I change the arrow image in the combo box control to a different image?
Please give your suggestions.
Ok, I've edited my answer.
Looks like the only way to do it is wrap the Label in a container like an HBox
<mx:HBox width="100%" horizontalAlign="right" id="hbox1" cornerRadius="16" borderStyle="solid">
<mx:Label label="{stuff}" id="opLabel" />
</mx:HBox>
Using Spark components use the BorderContainer control
<s:BorderContainer id="brdr"
cornerRadius="6"
width="80" height="30"
horizontalCenter="0" verticalCenter="0">
<s:Label id="lblFoo"
text="Bar"
width="100%" height="15"
horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>
To change the combobox arrow you need to change the following skins:
upSkin
overSkin
downSkin
disabledSkin
For an editable combobox you need to change the following skins:
editableUpSkin
editableOverSkin
editableDownSkin
editableDisabledSkin
If you coding on actionScript try this one, first you have to create in your css file attribute, for example:
CSS-File
.lineCorner{ corner-radius: 20; }
And in your main mxml app you have to set styleName to your Label like this example:
var myLabel:Label = new Label();
myLabel.text = "Bla-Bla-Bla";
myLabel.styleName = "lineCorner";
this.addChild(myLabel);