4 Replies Latest reply on Sep 17, 2010 11:18 AM by Miggl

    List with Custom ItemRenderer - Variable Row-Height Possible?

    Miggl

      Hi All,

       

      I have a custom itemrenderer that has a few label components in it, and possible additional components in the future (i.e. images, icons, etc.). The contents of the each item in the list are dynamic, so the text can be of different lengths and span different numbers of rows.

       

      What do I need to do to make the itemrenderer adjust its height, or the list adjust its row height depending on the height of the content of the itemrenderer? Seems like this should be an easy task, but I've only come up with people asking similar questions, no clear answers.

       

      I'm using Flex 4, btw.

       

      Thanks for any help!

       

      ~Mike

        • 1. Re: List with Custom ItemRenderer - Variable Row-Height Possible?
          Flex harUI Adobe Employee

          There are a few bugs related to this issue.  You may be hitting one or more

          of them.  If you can set the size of the text components so they don't have

          to measure themselves, you should get better results.

          • 2. Re: List with Custom ItemRenderer - Variable Row-Height Possible?
            Miggl Level 1

            Thanks, HarUI.

             

            Here is the code for my custom itemrenderer. As far as I know I made sure that none of the items had an explicit or implicit height set.

             

             

            <?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"
                 width="100%"
            >
                 <s:BorderContainer
                      cornerRadius="5"
                      left="0"
                      right="0"
                      top="0"
                      width="100%"
                       backgroundColor="#BBBBBB"
                 >
                      <s:layout>
                           <s:VerticalLayout paddingLeft="2" paddingRight="2" paddingTop="2" gap="5"/>
                      </s:layout>
                      <s:Label text="{data.title}" id="lbl_title" fontWeight="bold" color="#FFFFFF" fontSize="16" width="100%"/>
                      <s:Label text="written by {data.author} on {data.timestamp.toString()}" id="lbl_author" fontStyle="italic" color="#4A4A4A" width="100%" />
                      <s:RichText text="{data.content}" width="100%" />
                 </s:BorderContainer>
            </s:ItemRenderer>
            
            

             

             

             

            Thoughts?

             

            Thanks!

            Mike

             

            Update: Maybe something other than a list could be used? What would you suggest?

             

            Message was edited by: Miggl - Cleaned up the code.

            • 3. Re: List with Custom ItemRenderer - Variable Row-Height Possible?
              Miggl Level 1

              After some more playing around I was able to solve this by expressly setting the height of the bordercontainer by calculating the height of all its children. This is rudimentary at best; is there a way to have bordercontainer "collapse" to the height of its content?

               

              Here is the code so far:

               

              <?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"
                   width="100%"
              >
                   <s:BorderContainer
                        id="brd_container"
                        cornerRadius="5"
                        left="0"
                        right="0"
                        top="0"
                        width="100%"
                         backgroundColor="#BBBBBB"
                        height="{this.lbl_title.height + this.lbl_author.height + this.txt_content.height + this.brd_container.layout.gap * this.brd_container.numElements + this.brd_container.layout.paddingTop + this.brd_container.layout.paddingBottom}"
                   >
                        <s:layout>
                             <s:VerticalLayout paddingLeft="2" paddingRight="2" paddingTop="2" gap="5"/>
                        </s:layout>
                        <s:Label text="{data.title}" id="lbl_title" fontWeight="bold" color="#FFFFFF" fontSize="16" width="100%"/>
                        <s:Label text="written by {data.author} on {data.timestamp.toString()}" id="lbl_author" fontStyle="italic" color="#4A4A4A" width="100%" />
                        <s:RichText id="txt_content" text="{data.content}" width="100%" />
                   </s:BorderContainer>
              </s:ItemRenderer>
              
              

              • 4. Re: List with Custom ItemRenderer - Variable Row-Height Possible?
                Miggl Level 1

                It appears that the elegant solution is to set the minHeight attribute of the BorderContainer to 0. Once you do that, it will size itself according to its content.