Align the dropdown to the right when popUpWidthMatchesAnchorWidth is FALSE

Question

I created a “created” skin for DropDownList (that is, changed the default spark.skins.spark.DropDownListSkin ) and spark.skins.spark.DropDownListButtonSkin for my button.

I managed to get him to do almost everything I wanted, except that the list that drops out is aligned to the right of the button. Setting <s:PopUpAnchor popUpWidthMatchesAnchorWidth=*false* /> in the button sub-skin allows you to define the list by the width of the elements, because, obviously, the width of the button / of the entire control is much smaller than required.

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

Setting popUpPosition = "right"

That's what I would like to look like

So, at this point I need to either dig out the whole spark source code for DropDownList to better understand how everything works, or maybe someone here knows how to do this already.

Any ideas would be appreciated.

Answer 1

You can create your own PopUpAnchor class that extends from PopUpAnchor and override its PopUpAnchor function to change the behavior of PopUpPosition.BELOW :

 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.

Inside your DropDownList skin, replace the PopUpAnchor tag PopUpAnchor newly created class, and you should have a DropDownList that behaves as you wish.

There may be a more robust way to do this, but I'd rather spend my time without knowing what it is.

Answer 2

PopUpAnchor has a property called layoutDirection. I believe what you are looking for. If you set this property to "rtl", the drop-down list will be aligned as you wish.

Answer 3

Try adjusting popUpPosition of PopUpAnchor on your skin in addition to setting popUpWidthMatchesAnchorWidth . It can take the values ​​of left and right . More details here .