When first entering the world of Flex form components,
I noticed it was very easy to create a nice looking form in a matter of minutes.
However, when I supplied a helpcontent component to each form component, my formlayout is messed up. The helpcontent goes over my form components, I tried everything, but I just can't get it to align as it should.
Here is a picture:
http://gyazo.com/7363fb80c70340e029e41165b36bed2c.png
And here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%">
<s:Group width="100%" height="100%" left="10" right="10" top="10" bottom="10">
<s:VGroup width="100%" height="100%">
<s:HGroup width="100%" height="50%">
<s:Form width="75%">
<s:layout>
<s:FormLayout/>
</s:layout>
<s:FormHeading label="Filter (Optioneel)" />
<s:FormItem label="Naam:" width="100%">
<s:TextInput id="txtName" width="200"/>
<s:helpContent>
<s:Label x="0" y="0" paddingLeft="0" paddingRight="0"
text="Vul hier een naam in, dit mag een deel zijn."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Datum vanaf:" width="100%">
<mx:DateField id="dtFrom" width="200"/>
<s:helpContent>
<s:Label text="Kies hier een startdatum."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Datum tot:" width="100%">
<mx:DateField id="dtTo" width="200"/>
<s:helpContent>
<s:Label text="Kies hier een einddatum."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
<s:Panel width="100%" height="100%">
<mx:AdvancedDataGrid id="dgRunningQuotations" left="5" right="5"
top="5" bottom="25"
designViewDataType="flat"
resizableColumns="false" textAlign="right"
variableRowHeight="true">
<mx:columns>
<mx:AdvancedDataGridColumn width="50" dataField="ID"
headerText="NR"/>
<mx:AdvancedDataGridColumn dataField="Name" headerText="Naam"
wordWrap="true"/>
<mx:AdvancedDataGridColumn width="100" dataField="PDate"
headerText="Datum"/>
</mx:columns>
</mx:AdvancedDataGrid>
</s:Panel>
</s:VGroup>
</s:Group>
</s:Group>
Increasing the form size to an absolute value instead of 75%, doesn't help either.
Try not adding the width property on your form items and maybe even the items within that as see if that works. I tried a very simple example with no position settings and it worked fine.
Related
What should be added in order to the vertical scrollbar to be visible without to be clicked or touched ? Here is image of screen :
Here is code :
<s:Scroller width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center">
<s:TextInput id="chp1" width="50%"/>
<s:TextInput id="chp2" width="50%"/>
<s:Button label="Enregistrer" click="enregistrer(event)" styleName="btn"/>
<s:Label/>
<s:Button label="Lire" click="lire(event)" styleName="btn" />
<s:TextArea id="area"/>
<s:Label/>
<s:HGroup>
<s:Button label="Envoyer" click="send(event)" styleName="btn" />
<s:Button label="Retour" click="navigator.popView()" styleName="btn" />
</s:HGroup>
<s:TextArea id="resultHTTP"/>
<s:TextInput id="h_url" text="{url}" visible="false"/>
</s:VGroup>
</s:Scroller>
As you see the vertical scrollbar at the right of the screen is not visible. So how to make it visible anytime ?
Please try this, on your scroller:
verticalScrollPolicy = "on"
Update:
What about trying this:
interactionMode="mouse"
;)
At runtime when I click the Lire button then the TextArea field under it is populated from a sharedobject data and the display becomes bigger :
Here is code :
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" title=""
creationComplete="creationCompleteHandler(event)" >
...
<s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center">
<s:TextInput id="chp1" width="50%"/>
<s:TextInput id="chp2" width="50%"/>
<s:Button label="Enregistrer" click="enregistrer(event)" />
<s:Label/>
<s:Button label="Lire" click="lire(event)" />
<s:TextArea id="area"/>
<s:Label/>
<s:HGroup>
<s:Button label="Envoyer" click="send(event)" />
<s:Button label="Retour" click="navigator.popView()" />
</s:HGroup>
<s:TextArea id="resultHTTP"/>
<s:TextInput id="h_url" text="{url}" visible="false"/>
</s:VGroup>
How to enable vertical scroll then to view others components at the bottom ?
wrap your VGroup with a scroller. something like this:
's:Scroller width="100%" height="100%"
s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center"'
I have a Hgroup that contains of four panels. Sometimes it happens then when users open it the panls have a unknown width even bigger than the window resolution.
does anyone know what the problem is or how to solve it?
<s:Scroller width="100%" height="100%" >
<s:Group width="100%" height="100%">
<s:VGroup gap="10" width="100%">
<s:TextInput/>
<s:Line width="100%"><s:stroke><s:SolidColorStroke color="#696969"/></s:stroke></s:Line>
<s:HGroup gap="20" width="100%">
<s:Panel width="100%"/>
<s:Panel width="100%"/>
<s:Panel width="100%"/>
<s:Panel width="100%"/>
</s:HGroup>
<s:TextInput/>
</s:VGroup>
</s:Group>
</s:Scroller>
it seems that the User who was testing it was using an older version of the flash player! updating this. fixed the problem.
I want to add two icons on spark button.I am using button skin.
But the icons are not coming properly. Do anyone is having any idea?
The code is:
<s:HGroup width="100%">
<s:HGroup id="iconContainer" top="1" bottom="1" left="0" right="0"
horizontalAlign="{iconPosition}" verticalAlign="middle">
<mx:Image id="iconImage" source="{icon}" />
</s:HGroup>
<s:HGroup id="decoratorContainer"
width="100%">
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="0" right="0" top="2" bottom="2">
</s:Label>
<mx:Image id="image" source="{decorator}" />
</s:HGroup>
</s:HGroup>
Give absolute width and height to 'iconImage' and 'image' OR override commitProperties by calling invalidateProperties once the image size is known by the works of {Binding}. Hope it helped.
In flex form layout
<mx:Form id="form">
<mx:FormItem label="horizontal:">
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>
the output will be
horizontal 'test'
But my constraint is i want to align the textbox(first child of the form item ) vertically with the label. How can i do this ?Any inputs invited
You could override the form / formitem class to change the layout approach by overriding updateDisplayList method.
You could also try something like this:
<mx:Form id="form">
<mx:FormItem direction="vertical">
<mx:Label text="horizontal:"/>
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>
For Spark-Forms it works differently. Take a look at this very good description: https://opensource.adobe.com/wiki/display/flexsdk/Spark+Form
From the source above:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#stackedForm s|FormItem
{
skinClass : ClassReference("spark.skins.spark.StackedFormItemSkin");
}
</fx:Style>
<s:Form id="stackedForm">
<s:FormItem label="Address" sequenceLabel="1." required="true" >
<s:TextInput width="100%"/>
<s:TextInput width="100%"/>
<s:TextInput width="100%"/>
<s:helpContent>
<s:Label text="(ex. 123 Main Street)" baseline="24"/>
<s:Button label="?" width="30" baseline="24" x="120"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="City" sequenceLabel="2." required="true">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem label="State" sequenceLabel="3.">
<s:ComboBox dataProvider="{statesDP}" width="100%"/>
</s:FormItem>
<s:FormItem label="ZipCode" sequenceLabel="4." required="true">
<s:TextInput widthInChars="4" restrict="0123456789"/>
<s:helpContent>
<s:Label text="Will appear in your profile" left="0" right="0" baseline="24"/>
</s:helpContent>
</s:FormItem>
</s:Form>