Flex: how to reduce spacing between components

Question

hi,

how can I reduce the space between my linkButtons and inside each linkButton ?

I've set padding to 0 but it was already 0. I've been able to only change the height of the LinkButtons, but I cannot do that with the width because the text is dynamic.

<mx:Repeater id="bookmarksRepeater" dataProvider="{dataManager.bookmarksList}">
    <mx:HBox>
        <mx:VBox>
        <mx:HBox>
            <mx:Text >
               <mx:text> {String(bookmarksRepeater.currentItem.name)}</mx:text>
            </mx:Text>
            <mx:LinkButton height="16" rollOverColor="#FFA500" label="Visit" />
            <mx:LinkButton height="16" rollOverColor="#FFA500" label="Add" />
            <mx:LinkButton height="16" rollOverColor="#FFA500" label="Save" />
        </mx:HBox>
     <mx:HBox>
        <mx:Repeater id="tagsRepeater" dataProvider="{bookmarksRepeater.currentItem.tags}">
           <mx:LinkButton height="14" color="0x0033CC" rollOverColor="#FFA500" fontSize="8" label="{String(tagsRepeater.currentItem.name)}"/>
     </mx:Repeater>
     </mx:HBox>
    </mx:VBox>
     <mx:Text height="16" color="0x0033CC" fontWeight="bold" >
    <mx:text> {String(bookmarksRepeater.currentItem.popularity)} </mx:text>
       </mx:Text>
    </mx:HBox>
</mx:Repeater> 

Answer 1

Your Repeater is inside an HBox, which has horizontal spacing set by default. To remove this spacing, set the horizontalGap to 0:

 <mx:HBox horizontalGap="0">
    <mx:Repeater id="tagsRepeater" dataProvider="{bookmarksRepeater.currentItem.tags}">
       <mx:LinkButton height="14" color="0x0033CC" rollOverColor="#FFA500" fontSize="8" 
           label="{String(tagsRepeater.currentItem.name)}"/>
    </mx:Repeater>
 </mx:HBox>

Answer 2

To set the width of the LinkButtons dynamically, you will probably have to do it by overriding commitProperties of your container class, and for each LinkButton calculate the text metrics:

var m:TextLineMetrics = linkButton.measureText(lb.label);

Then you should be able to use the calculated metrics to set a precise width value for each LinkButton.

Another way to do it would be to listen for labelChanged events on the LinkButton, and then force a width recalculation in the listener.