<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Kalen Gibbons &#187; variableRowHeight</title>
	<atom:link href="http://www.kalengibbons.com/blog/index.php/tag/variablerowheight/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.kalengibbons.com/blog</link>
	<description>The Dead Tree Blog</description>
	<lastBuildDate>Wed, 10 Mar 2010 07:28:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Disappearing data in your itemRenderer?</title>
		<link>http://www.kalengibbons.com/blog/index.php/2008/10/disappearing-data-in-your-itemrenderer/</link>
		<comments>http://www.kalengibbons.com/blog/index.php/2008/10/disappearing-data-in-your-itemrenderer/#comments</comments>
		<pubDate>Wed, 15 Oct 2008 03:11:40 +0000</pubDate>
		<dc:creator>Kalen Gibbons</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Bugs]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[itemRenderer]]></category>
		<category><![CDATA[List]]></category>
		<category><![CDATA[variableRowHeight]]></category>

		<guid isPermaLink="false">http://www.kalengibbons.com/blog2/?p=48</guid>
		<description><![CDATA[Note: An update to this post has been posted here. It provides a better solution than the one offered below, so I recommend you check it out. Although I love Flex, it can still be a bit buggy at times. I was working with an itemRenderer the other day and came across some very odd [...]]]></description>
			<content:encoded><![CDATA[<p class="notice">Note: An update to this post has been posted <a href="http://www.kalengibbons.com/blog/post.cfm/update-solution-to-disappearing-data-in-your-itemrenderer">here</a>.  It provides a better solution than the one offered below, so I recommend you check it out.</p>
<p>Although I love Flex, it can still be a bit buggy at times.  I was working with an itemRenderer the other day and came across some very odd behavior.  I had a list using an itemRenderer and when the data originally loaded everything was fine, but whenever I scrolled some of the data started disappearing.  You can see this demonstrated in the sample below.</p>
<p><br/></p>
<table border="0">
<tr>
<td>
<iframe src="/assets/pages/itemRenderer1.html" frameborder="0" width="310" height="230"></iframe>
</td>
<td>
<div style="margin-left: 5px;" class="code">
<span class="mxmlComponent">&lt;mx:List</span> dataProvider=&quot;<span class="mxmlString">{</span>myData.item<span class="mxmlString">}</span>&quot;</p>
<div class="indent3">variableRowHeight=&quot;<span class="mxmlString">true</span>&quot;<br />
alternatingItemColors=&quot;<span class="mxmlString">['#FFFFFF','#E6EEF3']</span>&quot;<br />
width=&quot;<span class="mxmlString">100%</span>&quot;<br />
height=&quot;<span class="mxmlString">100%</span>&quot;<span class="mxmlComponent">&gt;</span></div>
<p>&nbsp;</p>
<div class="indent">
<span class="mxmlComponent">&lt;mx:itemRenderer&gt;</span></p>
<div class="indent">
<span class="mxmlSpecialString">&lt;mx:Component&gt;</span></p>
<div class="indent">
<span class="mxmlComponent">&lt;mx:VBox</span> verticalGap=&quot;<span class="mxmlString">0</span>&quot;&gt;</p>
<div class="indent">
<span class="mxmlComponent">&lt;mx:HBox&gt;</span></p>
<div class="indent">
<span class="mxmlComponent">&lt;mx:Label</span> text=&quot;<span class="mxmlString">{</span>data.Label<span class="mxmlString">}</span>&quot; fontWeight=&quot;<span class="mxmlString">bold</span>&quot; <span class="mxmlComponent">/&gt;</span><br />
<span class="mxmlComponent">&lt;mx:Label</span> text=&quot;<span class="mxmlString">{</span>data.date<span class="mxmlString">}</span>&quot; color=&quot;<span class="mxmlString">#999999</span>&quot; <span class="mxmlComponent">/&gt;</span></div>
<p><span class="mxmlComponent">&lt;/mx:HBox&gt;</span><br />
<span class="mxmlComponent">&lt;mx:Text</span> text=&quot;<span class="mxmlString">{</span>data.description<span class="mxmlString">}</span>&quot; width=&quot;<span class="mxmlString">100%</span>&quot; <span class="mxmlComponent">/&gt;</span></div>
<p><span class="mxmlComponent">&lt;/mx:VBox&gt;</span></div>
<p><span class="mxmlSpecialString">&lt;/mx:Component&gt;</span></div>
<p><span class="mxmlComponent">&lt;/mx:itemRenderer&gt;</span>
</div>
<p><span class="mxmlComponent">&lt;/mx:List&gt;</span>
</div>
</td>
</tr>
</table>
<p>
Apparently, Flex likes to have all the items in a list the same height; so when an item such as the Text field in the example causes variation, Flex simply doesn&#8217;t display it. I found that the easiest way to remedy the issue was to set explicit heights for the items in the renderer. Here is an example of how it works with the height explicitly set:</p>
<p><br/></p>
<table border="0">
<tr>
<td>
<iframe src="/assets/pages/itemRenderer2.html" frameborder="0" width="310" height="230"></iframe>
</td>
<td>
<div style="margin-left: 5px;" class="code">
<span class="mxmlComponent">&lt;mx:List</span> dataProvider=&quot;<span class="mxmlString">{</span>myData.item<span class="mxmlString">}</span>&quot;</p>
<div class="indent3">variableRowHeight=&quot;<span class="mxmlString">true</span>&quot;<br />
alternatingItemColors=&quot;<span class="mxmlString">['#FFFFFF','#E6EEF3']</span>&quot;<br />
width=&quot;<span class="mxmlString">100%</span>&quot;<br />
height=&quot;<span class="mxmlString">100%</span>&quot;<span class="mxmlComponent">&gt;</span></div>
<p>&nbsp;</p>
<div class="indent">
<span class="mxmlComponent">&lt;mx:itemRenderer&gt;</span></p>
<div class="indent">
<span class="mxmlSpecialString">&lt;mx:Component&gt;</span></p>
<div class="indent">
<span class="mxmlComponent">&lt;mx:VBox</span> verticalGap=&quot;<span class="mxmlString">0</span>&quot;&gt;</p>
<div class="indent">
<span class="mxmlComponent">&lt;mx:HBox&gt;</span></p>
<div class="indent">
<span class="mxmlComponent">&lt;mx:Label</span> text=&quot;<span class="mxmlString">{</span>data.Label<span class="mxmlString">}</span>&quot; fontWeight=&quot;<span class="mxmlString">bold</span>&quot; <span class="mxmlComponent">/&gt;</span><br />
<span class="mxmlComponent">&lt;mx:Label</span> text=&quot;<span class="mxmlString">{</span>data.date<span class="mxmlString">}</span>&quot; color=&quot;<span class="mxmlString">#999999</span>&quot; <span class="mxmlComponent">/&gt;</span></div>
<p><span class="mxmlComponent">&lt;/mx:HBox&gt;</span><br />
<span class="mxmlComponent">&lt;mx:Text</span> text=&quot;<span class="mxmlString">{</span>data.description<span class="mxmlString">}</span>&quot; width=&quot;<span class="mxmlString">100%</span>&quot; height=&quot;<span class="mxmlString">30</span>&quot; <span class="mxmlComponent">/&gt;</span></div>
<p><span class="mxmlComponent">&lt;/mx:VBox&gt;</span></div>
<p><span class="mxmlSpecialString">&lt;/mx:Component&gt;</span></div>
<p><span class="mxmlComponent">&lt;/mx:itemRenderer&gt;</span>
</div>
<p><span class="mxmlComponent">&lt;/mx:List&gt;</span>
</div>
</td>
</tr>
</table>
<p>
Now, this isn&#8217;t a perfect solution.  What we are doing here is effectively the same thing as setting variableRowHeight to false; thus making all the items in the List the same height.  So if anybody has a better solution for this issue please let me know.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.kalengibbons.com/blog/index.php/2008/10/disappearing-data-in-your-itemrenderer/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
	</channel>
</rss>
