1 Reply Latest reply on Mar 21, 2008 6:09 AM by Gregory Lafrance

    Problem with accordion gap

    gladstoneo
      Hi, I'm using an accordion component with 2 nested repeaters, the visualization is OK, except I cannot get rid of a vertical gap in the list between my sections. The list displays correctly the items of my first section and after that, it has a gap and then section 2. How could I get rid of that gaps?

      Thanks in advance

      mofi


      My code is here

      Attach Code

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"

      width="400"
      height="300"
      backgroundColor="#FFFFFF">

      <mx:XML id="model" format="e4x">
      <course >
      <module id="1" label="Course 1">
      <section label="section 1">
      <lesson label="Lesson One" />
      <lesson label="Lesson Two"/>
      </section>
      <section label="section 2">
      <lesson label="Lesson Three" />
      </section>
      </module >
      <module id="2" label="Course 2">
      <section label="section 1">
      <lesson label="Lesson One" />
      </section>
      <section label="seccion 2">
      <lesson label="Lesson Two" />
      <lesson label="Lesson Three" />
      </section>
      </module >
      <module id="3" label="Course 3">
      <section label="section 1">
      <lesson label="Lesson One" />
      <lesson label="Lesson Two" />
      </section>
      <section label="section 2">
      <lesson label="Lesson Three" />
      <lesson label="Lesson Four" />
      </section>
      </module >
      </course>
      </mx:XML>


      <mx:Accordion width="100%" height="100%" verticalGap="0" >
      <mx:Repeater id="repeat" dataProvider="{model.module}" >
      <mx:VBox width="100%" height="100%" verticalGap="0" label="{repeat.currentItem.@label}" >
      <mx:Repeater id="repeat2" dataProvider="{model.module[Number(repeat.currentItem.@id)-1].section}" >
      <mx:Label text="{repeat2.currentItem.@label}" />
      <mx:List labelField="@label" width="100%" dataProvider="{repeat2.currentItem.lesson}" />
      </mx:Repeater>
      </mx:VBox>
      </mx:Repeater>
      </mx:Accordion>

      </mx:Application>


        • 1. Re: Problem with accordion gap
          Gregory Lafrance Level 6
          I might stop using repeaters and have a custom component for each course. There will be many common elements in each course, probably each will have sections, or perhaps some will not. In any case, just iterate through the xml data provider and create instances of your course custom component, which can be based on VBox as root container. This might help.