In the previous post, I have tried to play around with the width of the drop down popup of the Flex DropDownList. An interesting observation is that the drop down is always aligned to the left edge of the open button of the DropDownList. Now it could be a requirement to open it aligned to the right edge or even centered with respect to the open button. So how to achieve that?
For this we need to dig into the DropDownListSkin. We can see that the component opens the drop down popup using a PopUpAnchor which is aligned with left = 0. Now this causes, the popup to stick to the left edge. So, in order to right align it we need to clear the left constraint and make right = 0. For clearing the left constraint, all that we have to do is to set it to undefined!
Now, it works fine if we have fixed width for the drop down but in a previous post, we have seen that we can have the width of the drop down to auto expand as well. This auto expansion breaks our alignment and the popup does not remain aligned to the right edge.
A simple solution that I have employed is to keep track of the popup width by using Binding and whenever the width changes, I just re-position the popup. The same method can be used to position the popup in the center. All you have to do is to calculate the left/right constraint position from where the popup needs to open up.
A sample application showing both the auto expanding and the fixed width DropDownList is shown below. Three buttons are provided to change the alignment of the drop down on the fly. You can also see the behavior of the lists when they are placed near the edges of the screen as well.
For this we need to dig into the DropDownListSkin. We can see that the component opens the drop down popup using a PopUpAnchor which is aligned with left = 0. Now this causes, the popup to stick to the left edge. So, in order to right align it we need to clear the left constraint and make right = 0. For clearing the left constraint, all that we have to do is to set it to undefined!
Now, it works fine if we have fixed width for the drop down but in a previous post, we have seen that we can have the width of the drop down to auto expand as well. This auto expansion breaks our alignment and the popup does not remain aligned to the right edge.
A simple solution that I have employed is to keep track of the popup width by using Binding and whenever the width changes, I just re-position the popup. The same method can be used to position the popup in the center. All you have to do is to calculate the left/right constraint position from where the popup needs to open up.
A sample application showing both the auto expanding and the fixed width DropDownList is shown below. Three buttons are provided to change the alignment of the drop down on the fly. You can also see the behavior of the lists when they are placed near the edges of the screen as well.
A small modification is required to the skin as well for which I have created my CustomDropDownListSkin which has this minor modification :
<s:PopUpAnchor id="popUp"
displayPopUp.normal="false"
displayPopUp.open="true"
includeIn="open"
bottom="0"
popUpPosition="below"
itemDestructionPolicy="never"
top="{height}"
popUpWidthMatchesAnchorWidth="false">
The component provides a popupPosition property which can be set to LEFT_EDGE_ALIGNED, RIGHT_EDGE_ALIGNED or JUSTIFIED depending on the your requirement. Easy as that!
The same trick can be used to achieve any kind of custom alignment as well. All you have to figure out is the starting position of your popup and position the popupAnchor to it.
Download the source code.
No comments:
Post a Comment