Skip navigation
Franck Black
Currently Being Moderated

List item renderer resize problem

Jul 30, 2013 4:16 AM

Tags: #resize #flex4 #item #renderer

Hi all,

I'm facing the following problem and I still don't know how to get rid of it.

Basically I have a list with a custom item renderer. The aforementioned list is hold in a HDividedBox this means the user can change the list width.

Every row in my list consists in a label on the left and an image on the right.

What I'm trying to achieve is a ellipsed label's content if the string doesn't fit in the available space. but what I got is a label which is not cut off and if there is a too long one the

image is pulled away and is not visible unless the user widens the list  dragging the divider.

Of curse even if the content fits the initial width if the user shrinks the list  the content won't be resized and the content is partially hidden.

 

Could you please show me how to correctly layout the components in the renderer in order to obtain the desired result?

 

Thanks

Regards

 
Replies
  • Currently Being Moderated
    Jul 30, 2013 9:32 AM   in reply to Franck Black

    mx:List or s:List?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 10, 2013 9:22 PM   in reply to Franck Black

    try using Label as Itemrenderer for the label

     

    itemRenderer="mx.controls.Label"

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 19, 2013 2:23 AM   in reply to Franck Black

    If you are using a separate renderer, try this

     

    <?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"

                    xmlns:mx="library://ns.adobe.com/flex/mx"

                    autoDrawBackground="true" width="100%">

       

        <s:Label text="{data}" maxDisplayedLines="1" lineBreak="toFit" showTruncationTip="true" width="100%"/>

       

    </s:ItemRenderer>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 19, 2013 11:30 AM   in reply to Franck Black

    try this:

     

    <s:HGroup width="100%" gap="10">

          

                        <s:VGroup width="80" height="90" gap="0">

                                  <mx:Image id="img" width="100%" height="80" horizontalAlign="center"/>

                                  <s:Rect width="100%" height="10">

                                            <s:fill><s:SolidColor id="statusCol"/></s:fill>

                                  </s:Rect>

                        </s:VGroup>

     

                        <s:VGroup width="100%" gap="0">

                                  <s:Label id="lblName" fontSize="20" color="#FFFFFF" width="100%" maxDisplayedLines="1" lineBreak="toFit"                                         showTruncationTip="true"/>

                                  <s:Label id="lblInfo" fontSize="14" color="#FFFFFF" width="100%" maxDisplayedLines="1" lineBreak="toFit"                                         showTruncationTip="true"/>/>

                        </s:VGroup>

     

                        <s:Label id="lblPercentage" fontSize="30" width="50" color="0xFFFF00" maxDisplayedLines="1"/>

     

    </s:HGroup>

     

    PS: there might be a type error, plz check

     

    -Regards, J

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points