listapache-flexflex4flex4.5

VGroup or List doesn't fit into TileWindow, is too high

Does anybody please know, how to make the List and Checkbox (inside a VGroup) to fit into a TileWindow?

screenshot

The complete source code Text.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">

    <s:TitleWindow width="240" height="240"
                   title="Why is List so tall?">
        <s:VGroup paddingLeft="20" paddingTop="20" 
                  paddingRight="20" gap="20" 
                  width="100%" height="100%">

            <s:List>
                <s:ArrayList>
                    <fx:String>10♠</fx:String>
                    <fx:String>Д♠</fx:String>
                    <fx:String>К♠</fx:String>
                    <fx:String>10♠</fx:String>
                    <fx:String>Д♠</fx:String>
                    <fx:String>К♠</fx:String>
                    <fx:String>10♠</fx:String>
                    <fx:String>Д♠</fx:String>
                    <fx:String>К♠</fx:String>
                </s:ArrayList>
            </s:List>

            <s:CheckBox label="Confirm bid" />

        </s:VGroup>
    </s:TitleWindow>
</s:Application>
Solution

  • Without specifying a size, the List is measuring and sizing itself.

    Add width and height to the List:

            <s:List width="100%"
                height="100%">

    Which produces:

    enter image description here

    Full code:

    <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955"
               minHeight="600">

    <s:TitleWindow width="240"
                   height="240"
                   title="Why is List so tall?">
        <s:VGroup paddingLeft="20"
                  paddingTop="20"
                  paddingRight="20"
                  gap="20"
                  width="100%"
                  height="100%">

            <s:List width="100%"
                    height="100%">
                <s:ArrayList>
                    <fx:String>10♠</fx:String>
                    <fx:String>Д♠</fx:String>
                    <fx:String>К♠</fx:String>
                    <fx:String>10♠</fx:String>
                    <fx:String>Д♠</fx:String>
                    <fx:String>К♠</fx:String>
                    <fx:String>10♠</fx:String>
                    <fx:String>Д♠</fx:String>
                    <fx:String>К♠</fx:String>
                </s:ArrayList>
            </s:List>

            <s:CheckBox label="Confirm bid" />

        </s:VGroup>
    </s:TitleWindow>
</s:Application>