Comportamiento extraño para rowSpan en Flex

Question

Estoy experimentando algunas rarezas al trabajar con un componente Grid en flex, tengo el siguiente formulario que usa una grilla para alinear los campos, como puedes ver, cada GridRow tiene un borde.

Mi problema es que el borde todavía es visible a través de GridItems que abarcan varias filas (observe el TextArea que abarca 4 filas, ¡los bordes de GridRow van hacia la derecha!)

¿Alguna idea de cómo solucionar este problema?

Answer 1

Creo que el problema es que cuando se dibuja el Grid, dibuja cada fila de arriba a abajo, y dentro de cada fila los elementos de izquierda a derecha.Entonces, el elemento <mx:TextArea> que abarca filas se dibuja primero y se extiende hacia abajo en el área de las 2 filas siguientes, que se dibujan después y encima.

La forma más rápida que puedo ver sería dibujar los bordes de las filas en los <mx:GridItem>s, omitiendo los bordes izquierdo y derecho según la ubicación del elemento en la fila.Algo como esto:

<?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>