Flex Examples

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.

View MXML

<?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.