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
Related
I want the TextArea under my second tab to update when the tab is clicked. However, it's only updating when I click on the TextArea or the container for that text area.
Flex:
<mx:Box paddingLeft="0" paddingRight="0" paddingBottom="0" paddingTop="0" width="100%" height="100%"
<mx:VBox id="vbxHTMLBody" width="100%" height="100%" horizontalScrollPolicy="off" horizontalAlign="center">
<mx:TabNavigator id = "tabNav" borderStyle="solid" width="100%" height="100%" creationPolicy="all">
<mx:VBox label="Tab1" width="100%" height="100%">
<mx:TextArea id="textArea1" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
<mx:VBox label="Tab2" width="100%" height="100%" click="updateTextArea2()">
<mx:TextArea id="textArea2" paddingTop="25" paddingLeft="25" paddingRight="25" verticalScrollPolicy="on" focusThickness="0" borderThickness="0" borderStyle="none" editable="true" fontFamily="Arial" fontSize="14" width="100%" height="100%"/>
</mx:VBox>
</mx:TabNavigator>
</mx:VBox>
</mx:Box>
ActionScript:
private function updateTextArea2(): void {
textArea2.htmlText = textArea1.text;
tabNav.validateNow();
textArea2.validateNow();
}
*I've also tried setting the click listener to the outer containers and that hasn't worked either.
I used change="updateTextArea2()" to listen for any changes made to the text area.
Call updateTextArea2()on change of the TabNavigator:
<mx:TabNavigator id="tabNav" change=updateTextArea2()">
instead from VBox change.
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.
Is there a way to align an image to the rightmost of HGroup, which is setted to 100% width ?
here is my code, but it aligning the image "imageZoom" just after the object before it :
<s:VGroup id="masterVGroup" width="100%">
<s:HGroup id="masterHGroup" gap="3" width="100%" verticalAlign="middle">
<s:SpriteVisualElement id="colorBox" width="12" height="6""/>
<s:Label id="labelDisplay" text="delete"/>
<s:Image id="imageZoom"
right="2"
horizontalAlign="right"
source="{iconZOOM}"/>
</s:HGroup>
</s:VGroup>
<s:VGroup id="masterVGroup" width="100%">
<s:HGroup id="masterHGroup" gap="3" width="100%" verticalAlign="middle" horizontalAlign="right">
<s:SpriteVisualElement id="colorBox" width="12" height="6""/>
<s:Label id="labelDisplay" text="delete"/>
<s:Image id="imageZoom"
right="2"
horizontalAlign="right"
source="{iconZOOM}"/>
</s:HGroup>
</s:VGroup>
I think it should work :)
In a case you want to have SpriteVisualElement and Label instances on the same places you can use spacer:
<s:VGroup id="masterVGroup" width="100%">
<s:HGroup id="masterHGroup" gap="3" width="100%" verticalAlign="middle">
<s:SpriteVisualElement id="colorBox" width="12" height="6""/>
<s:Label id="labelDisplay" text="delete"/>
<mx:Spacer width="100%"/>
<s:Image id="imageZoom"
right="2"
horizontalAlign="right"
source="{iconZOOM}"/>
</s:HGroup>
</s:VGroup>
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.