I am using a Spark DropDownlist component.I want to keep the size of the parent component (where the selected item shows up) small but when the user tries to select an item the box that shows up with the choices i want it to be big so that it contains all the elements and if an element is bigger then the size of the parent component it still fits in and the user will not have to do horizontal scrolling. I tried using an itemrenderer with various widths but it brings in horizontal scrolling on the choices.If i disable horizontal scrolling on the parent component (i.e s:dropdownlist) then the choices that show up are cutoff, i mean some text is not shown. Can you please suggest a possible solution for this ?
2 Answers
1
votes
I just fixed it myself.
Basically i created a customskin for the dropdownlist and in the custom list i specified this property popupWidthMatchesAnchorWidth="false' for the PopupAnchor component. and then i created an itemrenderer with the width that i needed and it worked.
Note: i created the custom skin for dropdownlist, based on the existing sking of spark downdownlist and just modified this property.
0
votes
I don't know if it counts but you can put your solution into the open event like so,
<dropdown open="event.currentTarget.skin.popUp.popUpWidthMatchesAnchorWidth = false;"/>
without creating a skin. If you try to call it on creation complete the popup isn't created yet and you'll get an error. I've noticed a slight flash where the dropdown is updated. But this is a debug build and it's so slight that it may not be noticeable in the release build.
Addendum: I am using the skin after all since the content is changing dynamically it can be smaller than the drop down. So I noticed that when popUpWidthMatchesAnchorWidth's set to false the pop up width defaults to 140 or something like that. To fix this I added a binding to the list's width so the pop up will always be at least as wide as the list and grow wider when it needs to. To do this add the minWidth property to the dropdown in the drop down skin like so:
<s:Group id="dropDown" maxHeight="184" minHeight="22" minWidth="{hostComponent.width}">
