I try to understand how work gridlayout and I'm very desapointed by the result.
Indeed, my layout doesn't apply width GridItem.
For each mx:GridRow, GridItem total colspan is 6.
At first GridRow, I define, width in percent, but as you can see, GridItem hasn't same size even if width and colspan number are the same!
Main problem is on GridRow 1 and GridRow 2, both dropdowlist are too large!
<s:VGroup id="mainContainer" width="{contentGroup.width}" height="{contentGroup.height}" >
<!-- partie centrale-->
<s:VGroup height="100%" width="100%">
<s:BorderContainer width="100%" verticalCenter="0">
<mx:Grid width="100%" height="100%"
paddingBottom="5" paddingTop="5" paddingLeft="5" paddingRight="5">
<mx:GridRow id="l1" width="100%">
<mx:GridItem colSpan="1" width="15%" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="2" width="35%" horizontalAlign="left">
<s:DropDownList id="cbCivilCor" width="100%"
prompt="" />
</mx:GridItem>
<mx:GridItem colSpan="1" width="15%" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="2" horizontalAlign="left" width="35%">
<s:DropDownList id="cbSpecCor" width="100%"
prompt=""/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l2" width="100%">
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="2" horizontalAlign="left" >
<s:TextInput id="tiNom" width="100%"/>
</mx:GridItem>
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="left">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="2" horizontalAlign="left" width="100%">
<s:TextInput id="tiPrenom" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l3" width="100%">
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="4" horizontalAlign="left" width="100%">
<s:TextInput id="tiAdr1" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l4" width="100%">
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
</mx:GridItem>
<mx:GridItem colSpan="4" horizontalAlign="left">
<s:TextInput id="tiAdr2" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l5" width="100%">
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="1" horizontalAlign="left">
<s:TextInput id="tiCP" width="100%"/>
</mx:GridItem>
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="2" horizontalAlign="left">
<s:TextInput id="tiVille" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l6" width="100%">
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="1" horizontalAlign="left">
<s:DropDownList id="cbTypeTel1"
prompt="" width="100%"/>
</mx:GridItem>
<mx:GridItem colSpan="1" horizontalAlign="left">
<s:TextInput id="tiNumTel1" width="100%"/>
</mx:GridItem>
<mx:GridItem colSpan="2" horizontalAlign="left">
<s:TextInput id="tiRemTel1" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l7" width="100%">
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
</mx:GridItem>
<mx:GridItem colSpan="1" horizontalAlign="left">
<s:DropDownList id="cbTypeTel2"
prompt="" width="100%"/>
</mx:GridItem>
<mx:GridItem colSpan="1" horizontalAlign="left">
<s:TextInput id="tiNumTel2" width="100%"/>
</mx:GridItem>
<mx:GridItem colSpan="2" horizontalAlign="left">
<s:TextInput id="tiRemTel2" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l8" width="100%">
<mx:GridItem colSpan="1" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="1" horizontalAlign="left">
<s:TextInput id="tiFax" width="100%"/>
</mx:GridItem>
<mx:GridItem colSpan="1" horizontalAlign="left">
<s:Label text="Label" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="2" horizontalAlign="left">
<s:TextInput id="tiMail" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l9" width="100%">
<mx:GridItem colSpan="3" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label tres long" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="3" horizontalAlign="left">
<s:DropDownList id="cbAppelCourr"
prompt="" width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="l10" width="100%">
<mx:GridItem colSpan="3" verticalAlign="middle" horizontalAlign="right">
<s:Label text="Label tres long" width="100%" horizontalCenter="0" textAlign="right"/>
</mx:GridItem>
<mx:GridItem colSpan="3" horizontalAlign="left">
<s:DropDownList id="cbPoliCourr"
prompt="" width="100%"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</s:BorderContainer>
<customNavTab:IconToggleButtonBar id="tbbAction" height="6%"
dataProvider="{buttons}"
itemClick="changeBbHandler(event)" labelPlacement="bottom"
paddingBottom="2" selectedIndex="-1" toggleOnClick="false"
horizontalAlign="center"
bottom="3"
width="100%"/>
</s:VGroup>
</s:VGroup>
So, can you explain to me why layout isn't according my hope!
Thanks.
The problem is that your GridItems are not consistent. You can draw an imaginary line down all of the cell lines, and they need to line up, since this is a grid layout. If in one case, you say you want a cell to be 35% and the one directly below that is set to 100%, you have a problem on your hands. The cell widths need to be consistent if you are going to use a Grid layout... I prefer against Grid layouts for this very reason but I am confident you can solve it.
Take this approach:
1. Comment everything out except for your first row. Cool! It is laid out the way you want.
2. Now uncomment the second row.
Already, your layout is messed up. Why? Because all of the GridItems in the second row have width="100%" set, which is inconsistent with the widths of the first row.
3. Set the widths to the same percents as the first row. Also make sure to stretch the input controls inside them to 100%.
Rinse and repeat.
Related
I have a combobox where the textAlign defaults to center. I tried setting it to texAlign="left", but the text is still centered.
<s:HGroup width="100%" height="90%" textAlign="left">
<s:VGroup width="45%" height="100%" textAlign="left">
<s:Label width="100%" fontSize="12" text="Company Name:" textAlign="left"
verticalAlign="middle"/>
<s:TextInput id="companyNameForm" width="100%"/>
<s:Label width="100%" fontSize="12" text="Industry:" textAlign="left"/>
<s:ComboBox id="companyIndustryForm" x="0" width="100%"
creationComplete="LoadIndustList(event)" labelField="IndustryEn"
selectedIndex="1"/>
<s:Label width="100%" fontSize="12" text="Contact Person:" textAlign="left"/>
<s:TextInput id="companyContactPersonForm" width="100%"/>
<s:Label width="100%" fontSize="12" text="Contact Phone:" textAlign="left"/>
<s:TextInput id="companyContactPhoneForm" width="100%"/>
<s:Label width="100%" fontSize="12" text="Created By:" textAlign="left"/>
<s:TextInput id="companyCreatedByForm" width="100%"/>
<s:Label width="100%" fontSize="12" text="Created Date" textAlign="left"/>
<s:TextInput id="companyCreatedDateForm" width="100%"/>
</s:VGroup>
please, in the code below, i would like to align the datagrid in the gridItem with instance 'row5' such that it is align with the other textInput in instances 'row3' and 'row4'?
thanks for any suggestion given..
<mx:Grid paddingTop="4" paddingLeft="4">
<mx:GridRow id="row1">
<mx:GridItem>
<s:Label text="Description:"
paddingTop="5"/>
</mx:GridItem>
<mx:GridItem>
<s:TextArea id="descTI" width="227" height="50"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row2">
<mx:GridItem>
<s:Label text="Name:"
paddingTop="5"/>
</mx:GridItem>
<mx:GridItem colSpan="3">
<s:TextInput id="nameTI" width="227"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row3">
<mx:GridItem>
<s:Label text="Target:"
paddingTop="5"/>
</mx:GridItem>
<mx:GridItem colSpan="3">
<s:TextInput id="targetTI" width="227"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row4">
<mx:GridItem>
<s:Label text="Through level:"
paddingTop="5"/>
</mx:GridItem>
<mx:GridItem colSpan="3">
<s:TextInput id="throughLevTI" width="227" height="20"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row5">
<mx:GridItem colSpan="4">
<s:Label text="Operand:"
paddingTop="5" />
<mx:DataGrid id="attrDG">
<mx:columns>
<mx:DataGridColumn dataField="variable"
width="150"/>
<mx:DataGridColumn dataField="level"
width="150"/>
</mx:columns>
</mx:DataGrid>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
Check this code:
Some tweaks in GridItem, colspan and width and you are done.
<mx:Grid paddingTop="4" paddingLeft="4">
<mx:GridRow id="row1">
<mx:GridItem>
<s:Label text="Description:" paddingTop="5"/>
</mx:GridItem>
<mx:GridItem>
<s:TextArea id="descTI" width="300" height="50"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row2">
<mx:GridItem>
<s:Label text="Name:" paddingTop="5"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput id="nameTI" width="300"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row3">
<mx:GridItem>
<s:Label text="Target:" paddingTop="5"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput id="targetTI" width="300"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row4">
<mx:GridItem>
<s:Label text="Through level:" paddingTop="5"/>
</mx:GridItem>
<mx:GridItem>
<s:TextInput id="throughLevTI" width="300" height="20"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row5">
<mx:GridItem>
<s:Label text="Operand:" paddingTop="5" />
</mx:GridItem>
<mx:GridItem>
<mx:DataGrid id="attrDG">
<mx:columns>
<mx:DataGridColumn dataField="variable" width="150"/>
<mx:DataGridColumn dataField="level"
width="150"/>
</mx:columns>
</mx:DataGrid>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
I've got a really simple Grid inside an ApplicationControlBar:
<mx:Grid>
<!--<mx:GridRow width="100%" height="100%">
<mx:GridItem colSpan="3">
<mx:Text fontSize="18" color="#000000" text="Conferences"/>
</mx:GridItem>
</mx:GridRow>
-->
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%">
<mx:HBox id="addedBtns">
</mx:HBox>
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
</mx:GridItem>
<mx:GridItem width="100%" height="100%">
<views:LanguageSelector id="langSelector" visible="false" />
<mx:LinkButton label="{ResourceUtil.getInstance().getString('bbb.mainToolbar.helpBtn')}" click="onHelpButtonClicked()"/>
<mx:Button label="{ResourceUtil.getInstance().getString('bbb.mainToolbar.logoutBtn')}" id="btnLogout"
toolTip="{ResourceUtil.getInstance().getString('bbb.mainToolbar.logoutBtn.toolTip')}" click="doLogout()"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
All I want to do Is make the Grid stretch 100% across the full width of the screen, however the above does not.
Any ideas?
Try this
<mx:Grid width="100%">
Your code now makes the grid scale to the size of its children.
Setting the grid width to 100% will make it scale to the size of its container.
Cheers
I have three griditems in a grid row.
Two with fixed width. How can i make the third scale automatically to maximize the grid?
I'd like the same functionality as html:
<table width="100%">
<tr><td width=50></td>
<td>this scales</td>
</td><td width=50></td></tr></table>
Regards
Anders
I think this code snippet can help you:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Grid bottom="0" left="0" right="0" top="0">
<mx:GridRow width="100%">
<mx:GridItem width="50">
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem width="50">
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem width="100%">
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem width="50">
<mx:Button label="Test" width="100%" />
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%">
<mx:GridItem>
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Test" width="100%" />
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Test" width="100%" />
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>
I want to display three different pieces of text in a line underneath a VBox so I've created a HBox and place the Text components in here:
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft"/>
<mx:Text text="center" id="textCenter"/>
<mx:Text text="right" id="textRight"/>
</mx:HBox>
I want the text with id "textLeft" to be positioned on the very left on the HBox and textCenter to be in the center and textRight to be on the right...
Any solutions/pointers appreciated.
try
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft"/>
<mx:Spacer width="100%" />
<mx:Text text="center" id="textCenter"/>
<mx:Spacer width="100%" />
<mx:Text text="right" id="textRight"/>
</mx:HBox>
or
<mx:HBox width="100%">
<mx:Text text="left" id="textLeft" textAlign="left" width="100%"/>
<mx:Text text="center" id="textCenter" textAlign="center" width="100%"/>
<mx:Text text="right" id="textRight" textAlign="right" width="100%"/>
</mx:HBox>
Personally I'd go with the top one
Thanks for your response. In the meantime I came up with this solution with help from a friend.
Using a grid:
<mx:Grid width="100%">
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="33%" height="100%" horizontalAlign="left">
<mx:Text text="left" id="textLeft"/>
</mx:GridItem>
<mx:GridItem width="33%" height="100%" horizontalAlign="center">
<mx:Text text="center" id="textCenter"/>
</mx:GridItem>
<mx:GridItem width="33%" height="100%" horizontalAlign="right">
<mx:Text text="right" id="textRight"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
However I do see that your solution is better for more things being added.