8 Replies Latest reply on Aug 22, 2013 12:22 AM by Franck Black

    List item renderer resize problem

    Franck Black Level 1

      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

        • 1. Re: List item renderer resize problem
          Flex harUI Adobe Employee

          mx:List or s:List?

          • 2. Re: List item renderer resize problem
            Franck Black Level 1

            It's a s:List.

            Thanx

            • 3. Re: List item renderer resize problem
              Subeesh Arakkan Level 4

              try using Label as Itemrenderer for the label

               

              itemRenderer="mx.controls.Label"

              • 4. Re: List item renderer resize problem
                Franck Black Level 1

                Hi,

                sorry but this sounds a little bit odd to me.

                 

                Do I have to  use the itemRenderer for the spark label in my list row itemRenderer?

                This raises a compiler error coz spark's label doesn't expose the itemRenderer attribute

                 

                That's what I've done:

                 

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

                 

                [...]

                 

                <s:Label id="myLabel" fontSize="20" color="#FFFFFF" width="100%" maxDisplayedLines="1"

                                                                             itemRenderer="mx.controls.Label"/>

                 

                [...]

                 

                </s:ItemRenderer>

                 

                I've done something wrong for sure .  Please advice.

                • 5. Re: List item renderer resize problem
                  Subeesh Arakkan Level 4

                  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>

                  • 6. Re: List item renderer resize problem
                    Franck Black Level 1

                    I've tried,

                    it doesn't work.

                    Please find below the whole ItemRenderer's layout with action script removed, maybe it can make the picture more clear

                     

                    <s:HGroup width="100%" verticalAlign="middle">

                     

                              <s:HGroup width="80%" horizontalAlign="left" >

                     

                                        <s:VGroup paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10">

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

                                                  <s:Rect width="80" height="10">

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

                                                  </s:Rect>

                                        </s:VGroup>

                     

                                        <s:VGroup paddingLeft="10" width="70%" verticalAlign="middle" height="100%">

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

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

                                        </s:VGroup>

                     

                              </s:HGroup>

                     

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

                     

                    </s:HGroup>

                    • 7. Re: List item renderer resize problem
                      Taran J Singh Level 1

                      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

                      • 8. Re: List item renderer resize problem
                        Franck Black Level 1

                        Hi all,

                        arranging the elements inside my item renderer in a mx:Grid container does the trick for me.

                         

                        Thanks you all for the support.

                         

                        Ragards