title: How to set label width inside itemrenderer for spark list in a liquid layout?
body: <p>In a flex project that I have that is designed to scale 100% to the web window, I have a spark list. And I have a simple itemrenderer that takes the data and displays a name, and a message. Just think of it like a simple instant messenger display. The problem is that for my <code>msg_txt</code> label I want to give it a width thats the width of the parent list thats holding it.</p>
  
  <p>I tried turning the horizontalScrollPolicy to off, also tried width="{this.parent.parent.width}" (as well as this.parent.width) for the spark label inside the item renderer. </p>
  
  <p>and in the label i tried some things like left="0" right="0" maxWidth="{this.width}" but nothing really does the trick.</p>
  
  <p>How can I make this label have a max width of the list thats holding it, AND make sure it resizes if the size of the browser changes and the list size changes?</p>
  
  <p>heres the list:</p>
  
  <pre><code>&lt;s:List id="chat_content" width="100%" height="100%"
                  alternatingItemColors="[#EEEEEE,#E6E6E6]" contentBackgroundColor="#EEEEEE"
                  horizontalScrollPolicy="off" itemRenderer="renderers.ActiveChatItemRenderer"&gt;
          &lt;/s:List&gt;
  </code></pre>
  
  <p>heres the itemrenderer:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"&gt;
  
      &lt;fx:Script&gt;
          &lt;![CDATA[
              import mx.core.FlexGlobals;
              import mx.events.FlexEvent;
  
              import spark.components.List;
  
              override public function set data(value:Object):void {
                  super.data = value;
                  if (data == null)
                      return;
  
                  if(data.systemMsg)
                  {
  
                  }
                  if(data.name)
                  {
                      name_label.text=data.name;
                  }
                  if(data.icon)
                  {
  
                  }
                  if(data.msg)
                  {
                      msg_txt.text=data.msg;
                  }
  
  
  
  
              }
  
  
  
  
  
          ]]&gt;
      &lt;/fx:Script&gt;
  
      &lt;s:states&gt;
          &lt;s:State name="normal" /&gt;
          &lt;s:State name="hovered" /&gt;
          &lt;s:State name="selected" /&gt;
      &lt;/s:states&gt;
  
      &lt;s:HGroup id="container" horizontalAlign="left" verticalAlign="top" paddingTop="10" paddingBottom="10"&gt;
          &lt;s:VGroup horizontalAlign="center" verticalAlign="middle"
                    width="100"&gt;
              &lt;s:Label id="name_label" fontWeight="bold" text="Name: "
                       fontSize="18"/&gt;
          &lt;/s:VGroup&gt;
          &lt;s:Label id="msg_txt" text="msg text here" width="{this.parent.parent.width}"/&gt;
  
  
      &lt;/s:HGroup&gt;
  
  &lt;/s:ItemRenderer&gt;
  </code></pre>