开发者

Flex: vertical gap between list items not working

I have a list item with buttons in it like so:

<mx:List contentBackgroundAlpha="0" baseColor="0x333333" leading="10"  id="weekButtonList"  width="260" borderVisible="false"  dataProvider="{_data.mappoints.week.@number}" itemClick="onWeekClick(event);" >
                <mx:itemRenderer  >
                    <mx:Component>
                        <mx:Button  buttonMode="true"  width="260" height="50" label="Week {data}"  />
                    </mx:Component>
                </mx:itemRenderer>
            </mx:List>

No matter what I do, these buttons have a vertical gap inbetwe开发者_运维技巧en them. I have tried everything from setting the "vertical-gap" property to negative and positive numbers as well as changing the padding-bottom and padding-top on them. I want the buttons to be right up against eachother vertically. I have also tried "button-height" and padding on the List component...still nothing. How do I control this?


If you can build the project in flex4 rather than 3.x the following solution would apply:

in your application file:

<?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/halo" minWidth="1024" minHeight="768">

<s:List contentBackgroundAlpha="0" baseColor="0x333333" id="weekButtonList"  width="260" borderVisible="false" itemRenderer="ListButton">
    <s:layout>
        <s:VerticalLayout gap="0">
        </s:VerticalLayout>
    </s:layout>
    <s:dataProvider>
        <s:ArrayList>
            <fx:Array>
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="No Gap" />
                <fx:Object label="Still No Gap" />
            </fx:Array>
        </s:ArrayList>
    </s:dataProvider>
</s:List>

in ListButton.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/halo" width="100%" height="100%">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<s:Button label="{data.label}" />

If flex 4 is an option I highly recommend making the switch.


Try setting the button paddingTop and paddingBottom to 0


To add to greg's answer, some layouts use verticalGap and horizontalGap where applicable.

<s:List>
    <s:layout>
        <s:TileLayout verticalGap="-2" />
    </s:layout>
</s:List>

I think the default is 0 (zero)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜