Align the dropdown list to the right when popUpWidthMatchesAnchorWidth is FALSE

Question

I have "created" a custom skin for DropDownList (i.e modified the default spark.skins.spark.DropDownListSkin) and spark.skins.spark.DropDownListButtonSkin for its button.

I have been able to get it to do almost everything I wanted, except for getting the list that drops down to align to the right of the button. Setting <s:PopUpAnchor popUpWidthMatchesAnchorWidth=*false* /> in the button sub-skin allows the list to be determined by the width of the items, because obviously the width of the button/entire control is far less than required.

Here is what it looks like now (default popUpPosition="bottom")

popUpPosition="bottom"

Setting popUpPosition="right"

popUpPosition="right"

Here is what I would like it to look like

Imagined "bottom right" alignment

So at this point, I either need to dig into all the spark source code for DropDownList to better understand how things work, or perhaps someone here knows how to do this already.

Any ideas would be appreciated.

justsee · Accepted Answer · 2012-02-18T23:22:50.937

You can create a custom PopUpAnchor class which extends from PopUpAnchor, and override its determinePosition function to modify how PopUpPosition.BELOW behaves:

override mx_internal function determinePosition(placement:String,
  popUpWidth:Number, popUpHeight:Number,matrix:Matrix,
  registrationPoint:Point, bounds:Rectangle):void
{
  switch(placement)
  {
    case PopUpPosition.BELOW:
      registrationPoint.x = -popUpWidth + unscaledWidth;
      registrationPoint.y = unscaledHeight;
      break;
    case PopUpPosition.ABOVE:
      registrationPoint.x = 0;
      registrationPoint.y = -popUpHeight;
      break;
    case PopUpPosition.LEFT:
      registrationPoint.x = -popUpWidth;
      registrationPoint.y = 0;
      break;
    case PopUpPosition.RIGHT:
      registrationPoint.x = unscaledWidth;
      registrationPoint.y = 0;
      break;            
    case PopUpPosition.CENTER:
      registrationPoint.x = (unscaledWidth - popUpWidth) / 2;
      registrationPoint.y = (unscaledHeight - popUpHeight) / 2;
      break;            
    case PopUpPosition.TOP_LEFT:
      // already 0,0
      break;
  }
}

Setting registrationPoint.x = -popUpWidth + unscaledWidth aligns it with the right edge of the button.

Within your DropDownList skin replace the PopUpAnchor tag with your newly created class and you should have a DropDownList which behaves as you requested.

Perhaps there's a saner way of doing this, but I'd rather spend my time not finding out what that is.

Thanks, quite a clean solution. – Atorian Feb 19 '12 at 12:39 — Atorian, Feb 19 '12 at 12:39

score 1 · Answer 2 · answered Aug 04 '14 at 18:50

1

PopUpAnchor has a property called layoutDirection. I believe that's what your looking for. If you set that property to "rtl" the dropdown will be aligned as you want.

answered Aug 04 '14 at 18:50

Pablo Meni

87
9

score 0 · Answer 3 · answered Jun 15 '11 at 08:30

0

Try to adjust popUpPosition of PopUpAnchor in your skin in addition to adjusting popUpWidthMatchesAnchorWidth. It can accept left and right values. More details is here.

answered Jun 15 '11 at 08:30

Constantiner

14,231
4
27
34

Playing with popUpPosition was indeed one of the first things I tried, but unfortunately it does not have any of the options I need; "right" aligns the list to the right, but the anchor of the list is the Top-Left corner, so it comes out all wrong. I have updated the question to show the results of popUpPosition="right", the first image is popUpPosition="below", the second (mockup) would maybe be "below right" if such a thing existed. – Atorian Jun 15 '11 at 10:31

Align the dropdown list to the right when popUpWidthMatchesAnchorWidth is FALSE

3 Answers3