3 Replies Latest reply on Aug 7, 2007 7:25 AM by france2003

    Repeater and Scrolling

    france2003
      I am using a repeater in a component. Oftentimes, the list I am creating will be longer than the viewable area so a scrollbar is available. However, when the scrollbar is used, the data in the repeater will overlap itself which leads to a "chopped up" look and the links in the repeater are not accessible. Here is the code:

      <mx:Repeater id="appraisalSourceRepeater" dataProvider="{acAppraisalSourceList}">
      <mx:HBox paddingTop="10">
      <mx:Image>
      <mx:source>{appraisalSourceRepeater.currentItem.THUMBNAILMAPURL}</mx:source>
      </mx:Image>
      <mx:Canvas backgroundColor="#FFFFFF" height="140" width="300" horizontalScrollPolicy="off">
      <mx:LinkButton height="18" x="0" y="15" id="btnAppraisalSourceName" label="{appraisalSourceRepeater.currentItem.COMPANYLOCATIONNAME} ({appraisalSourceRepeater.currentItem.DISTANCE} miles)"
      click="selectAppraisalSource(event.currentTarget.getRepeaterItem())" paddingLeft="0" rollOverColor="#859dbc"
      color="#0000ff" enabled="{assignEnabled}" useHandCursor="{assignEnabled}"/>
      <mx:Label text="{appraisalSourceRepeater.currentItem.ADDRESS1}" id="lblAddress1" y="105" x="133"/>
      <mx:Label text="{appraisalSourceRepeater.currentItem.CITY}, {appraisalSourceRepeater.currentItem.STATE}" id="lblCityState" y="120" x="133"/>
      <mx:Label x="0" y="30" text="Contact:" fontWeight="bold" id="lblContact"/>
      <mx:Label x="0" y="45" text="Phone Number: " fontWeight="bold" id="lblPhoneNumber"/>
      <mx:Label x="0" y="60" text="Fax Number: " fontWeight="bold" id="lblFaxNumber"/>
      <mx:Label x="0" y="75" text="Email:" fontWeight="bold" id="lblEmail"/>
      <mx:Label x="0" y="90" text="Hours Of Operation:" fontWeight="bold"/>
      <mx:Label x="0" y="105" text="Location" fontWeight="bold" id="lblLocation"/>
      <mx:Label x="0" y="0" text="{appraisalSourceRepeater.currentItem.PRIORITYLEVELDISPLAY}" fontWeight="bold" color="#ff0000" id="lblPriority"/>
      <mx:Label x="133" y="90" text="{appraisalSourceRepeater.currentItem.ABBREVIATEDHOURS}" id="lblHoursOfOperation2"/>
      <mx:Label x="133" y="75" text="{appraisalSourceRepeater.currentItem.EMAIL}" id="lblEmail2"/>
      <mx:Label x="133" y="60" text="{appraisalSourceRepeater.currentItem.FAXNUMBER}" id="lblFaxNumber2"/>
      <mx:Label x="133" y="45" text="{appraisalSourceRepeater.currentItem.PHONENUMBER}" id="lblPhoneNumber2"/>
      <mx:Label x="133" y="30" text="{appraisalSourceRepeater.currentItem.CONTACT}" id="lblContact2"/>
      </mx:Canvas>
      </mx:HBox>
      </mx:Repeater>

      This has been a thorn in our side for a while and the client is not happy. All help is greatly appreciated!!

      Thanks,
      France
        • 1. Re: Repeater and Scrolling
          france2003 Level 1
          Update...I have also tried to do this as a TileList with an itemrenderer for the repeatable content. This, too, causes overlapping during scrolling. The one plus to this vs the repeater is that it appears that if you hover over an item in the TileList, that item will correct itself visually whereas hovering over an item in the repeater will not correct itself. Unfortunately, any overlapping will not be acceptable -- still need help. Thanks!
          • 2. Re: Repeater and Scrolling
            ntsiii Level 3
            Hmm, I have never seen that behavior.

            What is the repeater's parent container?

            Can you set the height or width of the repeated item to a fixed value?

            Can you reduce this to a runnable example?

            Tracy
            • 3. Re: Repeater and Scrolling
              france2003 Level 1
              I apologize for the delayed response. Here is the original container nesting:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml"
              width="100%" height="100%" creationComplete="getMapAppraisalSources()"
              backgroundColor="#FFFFFF" horizontalScrollPolicy="off">

              <mx:VBox backgroundColor="#FFFFFF" right="10" bottom="10" top="10" left="10">
              <mx:Canvas width="100%">
              <mx:Button label="Previous Page" id="btnPreviousAppraisalSourcePage" click="previousPage()" x="10" visible="false"/>
              <mx:Button label="Next Page" id="btnNextAppraisalSourcePage" click="nextPage()" x="126" visible="false"/>
              </mx:Canvas>

              <mx:Canvas width="100%">
              <mx:Label id="lblResults" text="Your Search Returned {acAppraisalSourceList.length} {thisASType} Results" fontSize="12" fontWeight="bold" textAlign="center" width="100%"/>
              <mx:Label text="Located in a 40 mile radius from {objAS.VehicleAddress}, {objAS.VehicleCity}, {objAS.VehicleState} {objAS.VehicleZip}" width="100%" textAlign="center" y="12"/>
              <mx:Image left="10" top="38">
              <mx:source>{mainMapURL}</mx:source>
              </mx:Image>
              </mx:Canvas>

              <mx:Repeater id="appraisalSourceRepeater" dataProvider="{acAppraisalSourceList}">
              <mx:HBox paddingTop="10">
              <mx:Image>
              <mx:source>{appraisalSourceRepeater.currentItem.THUMBNAILMAPURL}</mx:source>
              </mx:Image>
              <mx:Canvas backgroundColor="#FFFFFF" height="140" width="300" horizontalScrollPolicy="off">
              <mx:LinkButton height="18" x="0" y="15" id="btnAppraisalSourceName" label="{appraisalSourceRepeater.currentItem.COMPANYLOCATIONNAME} ({appraisalSourceRepeater.currentItem.DISTANCE} miles)"
              click="selectAppraisalSource(event.currentTarget.getRepeaterItem())" paddingLeft="0" rollOverColor="#859dbc"
              color="#0000ff" enabled="{assignEnabled}" useHandCursor="{assignEnabled}"/>
              <mx:Label text="{appraisalSourceRepeater.currentItem.ADDRESS1}" id="lblAddress1" y="105" x="133"/>
              <mx:Label text="{appraisalSourceRepeater.currentItem.CITY}, {appraisalSourceRepeater.currentItem.STATE}" id="lblCityState" y="120" x="133"/>
              <mx:Label x="0" y="30" text="Contact:" fontWeight="bold" id="lblContact"/>
              <mx:Label x="0" y="45" text="Phone Number: " fontWeight="bold" id="lblPhoneNumber"/>
              <mx:Label x="0" y="60" text="Fax Number: " fontWeight="bold" id="lblFaxNumber"/>
              <mx:Label x="0" y="75" text="Email:" fontWeight="bold" id="lblEmail"/>
              <mx:Label x="0" y="90" text="Hours Of Operation:" fontWeight="bold"/>
              <mx:Label x="0" y="105" text="Location" fontWeight="bold" id="lblLocation"/>
              <mx:Label x="0" y="0" text="{appraisalSourceRepeater.currentItem.PRIORITYLEVELDISPLAY}" fontWeight="bold" color="#ff0000" id="lblPriority"/>
              <mx:Label x="133" y="90" text="{appraisalSourceRepeater.currentItem.ABBREVIATEDHOURS}" id="lblHoursOfOperation2"/>
              <mx:Label x="133" y="75" text="{appraisalSourceRepeater.currentItem.EMAIL}" id="lblEmail2"/>
              <mx:Label x="133" y="60" text="{appraisalSourceRepeater.currentItem.FAXNUMBER}" id="lblFaxNumber2"/>
              <mx:Label x="133" y="45" text="{appraisalSourceRepeater.currentItem.PHONENUMBER}" id="lblPhoneNumber2"/>
              <mx:Label x="133" y="30" text="{appraisalSourceRepeater.currentItem.CONTACT}" id="lblContact2"/>
              </mx:Canvas>
              </mx:HBox>
              </mx:Repeater>
              </mx:VBox>
              </mx:Canvas>

              We also had a support ticket in with Adobe regarding this issue. With their help and through trials and errors, we've learned a couple of things. One is that using the Canvas container may cause rendering issues in relation to scrolling [because of it's absolute layout - which is why I like the Canvas container, but I guess I'll have to watch my usage of it]. In addition to changing out the Canvas containers, we also used a List control rather than a Repeater. We now have a non-overlapping display. Here is our revised code...

              <?xml version="1.0" encoding="utf-8"?>
              <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml"
              width="100%" height="100%" backgroundColor="#FFFFFF">

              <mx:VBox width="450" backgroundColor="#FFFFFF" verticalScrollPolicy="off" horizontalScrollPolicy="off" visible="{thisVisible}">
              <mx:Canvas width="100%">
              <mx:Button label="Previous Page" id="btnPreviousAppraisalSourcePage" click="previousPage()" x="10" visible="false"/>
              <mx:Button label="Next Page" id="btnNextAppraisalSourcePage" click="nextPage()" x="126" visible="false"/>
              </mx:Canvas>

              <mx:VBox width="100%" horizontalAlign="center" verticalGap="0" backgroundColor="#FFFFFF">
              <mx:Label id="lblResults" text="Your Search Returned {acAppraisalSourceList.length} {thisASType} Results" fontSize="12" fontWeight="bold" textAlign="center" width="100%"/>
              <mx:Label text="Located in a 40 mile radius from {objAS.VehicleAddress}, {objAS.VehicleCity}, {objAS.VehicleState} {objAS.VehicleZip}" width="100%" textAlign="center"/>

              </mx:VBox>

              <mx:Image maxWidth="450" maintainAspectRatio="true">
              <mx:source>{mainMapURL}</mx:source>
              </mx:Image>

              </mx:VBox>
              <mx:List id="appraisalSourceList" dataProvider="{acAppraisalSourceList}" itemRenderer="src.eAutoclaims.view.WithMapItemRenderer" alternatingItemColors="#FFFFFF"
              verticalScrollPolicy="auto" horizontalScrollPolicy="off" width="320" selectionColor="#FFFFFF" rollOverColor="#FFFFFF"/>
              </mx:HBox>

              The page is supposed to display a large map at the top, followed by a list of locations [with a thumbnail map next to each] below the large map. We've had to place the list of locations NEXT to the large map because while the list [of locations] no longer overlaps when scrolling, the large map will still overlap the locations list when scrolling if we keep the large map on top of the locations list...

              Thanks for your response Tracy!