How to set label width inside itemrenderer for spark list in a liquid layout?

Question

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 msg_txt label I want to give it a width thats the width of the parent list thats holding it.

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.

and in the label i tried some things like left="0" right="0" maxWidth="{this.width}" but nothing really does the trick.

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?

heres the list:

<s:List id="chat_content" width="100%" height="100%"
                alternatingItemColors="[#EEEEEE,#E6E6E6]" contentBackgroundColor="#EEEEEE"
                horizontalScrollPolicy="off" itemRenderer="renderers.ActiveChatItemRenderer">
        </s:List>

heres the itemrenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![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;
                }




            }





        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>

    <s:HGroup id="container" horizontalAlign="left" verticalAlign="top" paddingTop="10" paddingBottom="10">
        <s:VGroup horizontalAlign="center" verticalAlign="middle"
                  width="100">
            <s:Label id="name_label" fontWeight="bold" text="Name: "
                     fontSize="18"/>
        </s:VGroup>
        <s:Label id="msg_txt" text="msg text here" width="{this.parent.parent.width}"/>


    </s:HGroup>

</s:ItemRenderer>

score 3 · Accepted Answer · answered Jun 29 '11 at 23:24

3

Did you tried with percentWidth and percentHeight programatically once the itemRenderer has been created ( creationComplete )?

or

I haven't tried next:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">

answered Jun 29 '11 at 23:24

Mc-

3,968
10
38
61

That was it! Thanks! (putting width="100%" height="100%" in the ItemRenderer declaration) – brybam Jun 29 '11 at 23:38
I'm not sure why this works. It is always up to the parent to size its' children; and in this case the List sizes the renderers. I thought itemRenderers were always sized to be 100% of the width of the List class. (Minus scroll bars, padding, and other similar values) – JeffryHouser Jun 30 '11 at 01:36
Thanks. Seven years later, I'm dealing with this exact thing. – Olin Kirkland Jul 12 '18 at 06:46

score 0 · Answer 2 · answered Jun 29 '11 at 23:14

Set percentage width properties on the itemRenderer's children:

<s:HGroup id="container" horizontalAlign="left" verticalAlign="top" paddingTop="10" paddingBottom="10" width="100%">
    <s:VGroup horizontalAlign="center" verticalAlign="middle"
              width="100">
        <s:Label id="name_label" fontWeight="bold" text="Name: "
                 fontSize="18"  width="100%"/>
    </s:VGroup>
    <s:Label id="msg_txt" text="msg text here" width="{this.parent.parent.width}"  width="100%"/>
</s:HGroup>

I'm unclear what layout you're going after. Since you only have two labels in the code; why do you need two groups? If you want to display the two items side by side you could use something like this:

<s:Label id="name_label" fontWeight="bold" text="Name: " fontSize="18"  width="100" x="0" y="0"/>
<s:Label id="msg_txt" text="msg text here" width="{this.parent.parent.width}"  width="100%" x="{name_label.x + name_label.width}" y="0"/>

Which I suspect will give you a similar layout without the use of the extra groups.

the reason i'm using 2 groups is because I was playing with some different layouts. Anyway, I tried your suggestion I set the label's width and the Hgroup's width to 100%...You'd think It would work, but it does not. the label still runs off the width of the list component and never breaks. I would try and use a text area/input, but the text area doesnt resize depending on the text entered the way the label does. — brybam, Jun 29 '11 at 23:34

How to set label width inside itemrenderer for spark list in a liquid layout?

2 Answers2