Limit width of custom list itemrenderer in Flex

A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)

Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)

The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.

Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.

This hides the bars, but doesn't limit the width, which almost makes it worse. Thanks for your answer though.

Tom Wright 2009-07-23 10:03:30

what width do you wanna limit? you can set a maxWidth inside the itemrenderer if you know how much room you need to display the content. You can even get the width of the parent (tileList or something) and set that as width. There are a lot of solutions for this problem

Arno 2009-07-23 11:23:51

maxWidth seems not to work, but I'd be interested to see an answer based on the other suggestion.

Tom Wright 2009-07-23 11:56:26

in your VBox in the itemrenderer add this property: width="{this.parent.width - 10}"not sure if the -10 is needed.But still it is strange that this is happening because the image inside the itemrenderer isn't wider than the List. Some property is causing this effect maybe the scaleContent? Or the align to center. What you could try is to set a maxWidth and maxHeight on the image

Arno 2009-07-23 12:52:15

width="{this.parent.width - 10}" didn't work. Nor did width="{this.parent.width}". Got a warning: "Data binding will not be able to detect assignments to "width"."

Tom Wright 2009-07-24 19:13:21

They don't use 'true' and 'false' because there are three, not two, options for scroll policies: 'off', 'on', and 'auto'. (I think you'll agree that 'true', 'false', and 'auto' is a bit misleading)

2010-01-26 01:42:45

ansaurus

tags:

views:

answers:

Limit width of custom list itemrenderer in Flex

related questions