Comportement étrange pour rowSpan dans Flex

Question

Je suis en train de vivre quelques "bizarreries" lorsque l'on travaille avec une Grille composant flex, j'ai le formulaire ci-dessous qui utilise une grille pour aligner les champs, comme vous pouvez le voir, chaque GridRow a une frontière.

Mon problème est que la frontière est toujours visible à travers GridItems qui s'étendent sur plusieurs lignes (observer le TextArea qui s'étend sur 4 lignes, le GridRow frontières aller de droite a lancé il!)

Toutes les idées de comment résoudre ce problème?

Answer 1

Je pense que le problème est que lorsque la Grille est dessinée, elle attire chaque ligne du haut vers le bas, et à l'intérieur de chaque ligne, les éléments de gauche à droite.Ainsi, la ligne-fractionné <mx:TextArea> l'élément est le premier qui s'étend jusque dans la zone des 2 rangs suivants, lequel est dessinée après et sur le dessus.

Le moyen le plus rapide autour de moi, je serait la pour dessiner la ligne des frontières sur l' <mx:GridItem>s au lieu de cela, en ignorant les bords gauche et droit en fonction de l'élément de placement en ligne.Quelque chose comme ceci:

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