Comportement impair pour rowSpan dans Flex

Question

Je rencontre des bizarreries lorsque je travaille avec un composant Grid en flex, j'ai le formulaire suivant qui utilise une grille pour aligner les champs, comme vous pouvez le voir, chaque GridRow a une bordure.

Mon problème est que la frontière est toujours visible à travers GridItems qui couvrent plusieurs lignes (observer la TextArea qui couvre 4 lignes, les frontières vont GridRow droite ont jeté!)

Toute idée de comment résoudre ce problème?

Answer 1

Je pense que le problème est que lorsque la grille est dessinée, elle dessine chaque rangée de haut en bas, et dans chaque rangée les éléments de gauche à droite. L'élément < mx: TextArea > s'étire en premier dans la zone des 2 lignes suivantes, qui sont dessinées après et en haut. Le moyen le plus rapide de contourner ce que je vois est de dessiner les bordures des lignes sur le < mx: GridItem > s, en ignorant les bords gauche et droit en fonction de l'emplacement de l'élément dans la 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>