The following example shows how you can reduce the amount of whitespace around a PopUpButton control’s pop up menu by setting the variableRowHeight property on the menu in Flex.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/31/reducing-the-vertical-space-around-a-separator-in-a-flex-popupbutton-controls-pop-up-menu-by-enabling-variable-row-heights/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="top"
backgroundColor="white">
<mx:Style>
PopUpButton {
openDuration: 0;
closeDuration: 0;
fontWeight: normal;
textAlign: left;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Menu;
import mx.utils.ObjectUtil;
private function popUpButton1_initialize():void {
var menu:Menu = new Menu();
menu.showRoot = false;
menu.labelField = "@label";
menu.dataProvider = ObjectUtil.copy(dp);
popUpButton1.popUp = menu;
}
private function popUpButton2_initialize():void {
var menu:Menu = new Menu();
menu.showRoot = false;
menu.labelField = "@label";
menu.dataProvider = ObjectUtil.copy(dp);
menu.variableRowHeight = true;
popUpButton2.popUp = menu;
}
private function popUpButton_creationComplete(evt:FlexEvent):void {
var pUB:PopUpButton = evt.currentTarget as PopUpButton;
// resize and open
pUB.popUp.width = pUB.width;
pUB.open();
}
private function openPopUpButtons():void {
popUpButton1.open();
popUpButton2.open();
}
]]>
</mx:Script>
<mx:XML id="dp" source="dp.xml" />
<mx:PopUpButton id="popUpButton1"
label="variableRowHeight = false"
openAlways="true"
width="250"
initialize="popUpButton1_initialize();"
creationComplete="popUpButton_creationComplete(event);"
open="openPopUpButtons();" />
<mx:PopUpButton id="popUpButton2"
label="variableRowHeight = true"
openAlways="true"
width="250"
initialize="popUpButton2_initialize();"
creationComplete="popUpButton_creationComplete(event);"
open="openPopUpButtons();" />
</mx:Application>
View source is enabled in the following example.
