Comportamento strano per rowSpan in Flex
-
09-06-2019 - |
Domanda
Sto riscontrando alcune stranezze quando lavoro con un componente Grid in flex, ho il seguente modulo che utilizza una griglia per allineare i campi, come puoi vedere, ogni GridRow ha un bordo.
Il mio problema è che il bordo è ancora visibile attraverso GridItems che si estendono su più righe (osserva la TextArea che si estende su 4 righe, i bordi di GridRow vanno a destra lanciandolo!)
Qualche idea su come risolvere questo problema?
Soluzione
Penso che il problema sia che quando viene disegnata la griglia, disegna ogni riga dall'alto verso il basso e all'interno di ciascuna riga gli elementi da sinistra a destra.Pertanto l'elemento <mx:TextArea> suddiviso in righe viene disegnato per primo estendendosi verso il basso nell'area delle 2 righe successive, che vengono disegnate dopo e sopra.
Il modo più rapido che vedo sarebbe invece quello di disegnare i bordi della riga sugli <mx:GridItem>, saltando i bordi sinistro e destro in base alla posizione dell'elemento nella riga.Qualcosa come questo:
<?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>