Comportement étrange pour rowSpan dans Flex
-
09-06-2019 - |
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?
La solution
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>