Scrollview row height and origin

[pasine]

I am trying positioning some element inside a view of a scrollview but I have noticed that the alignment is always wrong. It looks like the modifier is considering the viewport height instead of the single view one to position the elements. I have also tried to wrap the elements into a fa-container-surface but the result is that it takes the viewport height instead of the single view height. I set up a plunker to show the behavior. I also tried others layout (Grid, Flexi, etc.) but the result is always the same. Can someone explain me where is the error?

[steveblue]

You're use of fa-container-surface doesn't make sense to me. fa-view already acts like a container, although doesn't get deployed to the DOM. fa-container-surface can be used to encapsulate fa-scroll-view to clip it's contents, but doing the inverse may have mixed results.

You can also use fa-translate or fa-align to position a surface in relation to a parent that is being modified by fa-translate.

[pasine]

I set up another plunker reducing the elements, but I still don't get the desired result. I am trying to center the image vertically into the cell, but without success. What's wrong with this code?

 <fa-modifier fa-size="[undefined, 60]" fa-origin="[0, 0]" fa-align="[0.1, 0.5]">
     <fa-image-surface fa-image-url="http://dummyimage.com/50x50/cc1111/752066" fa-size="[33, 33]">
              </fa-image-surface>
</fa-modifier>

I am setting the bounds of the alignment fa-size="[undefined, 60]" and the alignment itself fa-origin="[0, 0]" fa-align="[0.1, 0.5]": isn't it correct?

[steveblue]

@pasine Draw the background before the child, use modifiers to set size and it works.

    <fa-scroll-view fa-pipe-from="myEventHandler">
    <fa-modifier fa-size="[undefined, 60]" >
      <fa-view ng-repeat="view in views" fa-size="[undefined, 60]">

            <fa-modifier fa-size="[undefined, 60]">
              <fa-surface fa-background-color="'#1BC06F'" fa-pipe-to="myEventHandler" fa-click="viewInfo($event)">
                Foo Title
              </fa-surface>
            </fa-modifier>

            <fa-modifier  fa-size="[33, 33]" fa-origin="[0.0, 0.0]" fa-align="[0.1, 0.2]">
              <fa-image-surface fa-image-url="http://dummyimage.com/50x50/cc1111/752066" >
              </fa-image-surface>
            </fa-modifier>

      </fa-view>
      </fa-modifier>
    </fa-scroll-view>

[pasine]

Here is the plunker. I just tried your solution: the image is correctly centered, but all the rows collapse on a single one.

[steveblue]

Your problem is mainly relying on fa-size as a method on the fa-view and fa-surface. fa-size should always be set with a modifier. Notice how I shifted the ng-repeat to a fa-modifier and use $index to sequence the result in fa-view. The outermost fa-modifier now uniformly sets the size of the fa-view and fa-surface. A nested fa-modifier sets the size of the fa-image-surface while it is also modifying the fa-align and fa-origin.

   <fa-app ng-controller="ScrollCtrl">
    <!-- fa-scroll-view receives all events from $scope.myEventHandler, and decides how to handle them -->
    <fa-scroll-view fa-pipe-from="myEventHandler">
    <fa-modifier ng-repeat="view in views track by $index" fa-size="[undefined, 60]" >
      <fa-view fa-index="$index">

              <fa-surface fa-background-color="'#1BC06F'" fa-pipe-to="myEventHandler" fa-click="viewInfo($event)">
                Foo Title
              </fa-surface>

            <fa-modifier fa-size="[33, 33]" fa-origin="[0.5, 0.5]" fa-align="[0.1, 0.5]" > <!-- THIS IS [0.1, 0.5] -->
              <fa-image-surface fa-image-url="http://dummyimage.com/50x50/cc1111/752066">
              </fa-image-surface>
            </fa-modifier>
      </fa-view>
      </fa-modifier>
    </fa-scroll-view>
  </fa-app>

[pasine]

This works perfectly. Thanks man, you have really clarified me a lot of things.

[steveblue]

@pasine please close this issue if it is solved.