Odd behaviour for rowSpan in Flex

Answer 1

I think the problem is that when the Grid is drawn, it draws each row from top to bottom, and within each row the items left to right. So the row-spanned <mx:TextArea> item is drawn first extending down into the area of the 2 next rows, which get drawn after and on top.

The quickest way around I can see would be to draw the row borders on the <mx:GridItem>s instead, skipping the left and right edges based on the item's placement in the row. Something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Style>
     Grid {
      background-color: white;
      horizontal-gap: 0;
     }
     GridItem {
      padding-top: 5;
      padding-left: 5;
      padding-right: 5;
      padding-bottom: 5;
      background-color: #efefef;

      border-style: solid;
      border-thickness: 1;
      border-color: black;
     }
     .left {
      border-sides: top, bottom, left;
     }
     .right {
      border-sides: top, bottom, right;
     }
     .center {
      border-sides: top, bottom;
     }
    </mx:Style>
    <mx:Grid>
     <mx:GridRow>
      <mx:GridItem styleName="left">
       <mx:Label text="Label"/>
      </mx:GridItem>
      <mx:GridItem styleName="center">
       <mx:ComboBox/>
      </mx:GridItem>
      <mx:GridItem styleName="center">
       <mx:Label text="Label"/>
      </mx:GridItem>
      <mx:GridItem styleName="right">
       <mx:ComboBox/>
      </mx:GridItem>
     </mx:GridRow>
     <mx:GridRow>
      <mx:GridItem styleName="left">
       <mx:Label text="Label"/>
      </mx:GridItem>
      <mx:GridItem styleName="center">
       <mx:TextInput/>
      </mx:GridItem>
      <mx:GridItem colSpan="2" rowSpan="3">
          <mx:VBox width="100%" height="100%">
        <mx:Label text="Label"/>
        <mx:TextArea width="100%" height="100%"/>
          </mx:VBox>
      </mx:GridItem>
     </mx:GridRow>
     <mx:GridRow>
      <mx:GridItem styleName="left">
       <mx:Label text="Label"/>
      </mx:GridItem>
      <mx:GridItem styleName="center">
       <mx:TextInput/>
      </mx:GridItem>
     </mx:GridRow>
     <mx:GridRow>
      <mx:GridItem styleName="left">
       <mx:Label text="Label"/>
      </mx:GridItem>
      <mx:GridItem styleName="center">
       <mx:TextInput/>
      </mx:GridItem>
     </mx:GridRow>
    </mx:Grid>
</mx:Application>

Answer 2

@billd d - Thanks, this is actually what I ended up doing, however there is now a gap between the GridItems, is there a way to alter the left and right margins of each GridItem?

Answer 3

@mmattax - I originally had extra horizontal space in the sample code too (causing a gap in the row borders), so I wound up setting the 'horizontal-gap' of Grid to "0" and adding those "paddings" to GridItem to push their left/right margins back out.