質問
フレックスで Grid コンポーネントを操作するときに、いくつかの奇妙な現象が発生します。グリッドを使用してフィールドを配置する次のフォームがあります。ご覧のとおり、各 GridRow には境界線があります。
私の問題は、複数の行にまたがる GridItems を通して境界線がまだ表示されていることです (4 行にまたがる TextArea を観察してください。GridRow の境界線が正しく表示されています!)。
これを修正する方法について何かアイデアはありますか?
解決
問題は、グリッドが描画されるときに各行が上から下に描画され、各行内で項目が左から右に描画されることだと思います。したがって、行にまたがる <mx:TextArea> 項目は、最初に次の 2 行の領域まで下方向に描画され、その後と上に描画されます。
私が知る最も簡単な回避方法は、行内の項目の配置に基づいて左端と右端をスキップして、代わりに <mx:GridItem> に行の境界線を描画することです。このようなもの:
<?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>
所属していません StackOverflow