Why my grid layout is too strange

Question

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.

Answer 1

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.