Scroll-view not scrolling with surface fa-size [undefined,true]

Question

I have a scroll-view has one fa-surface that contains the html for my page. The height for this `fa-surface' is dynamic since it can be larger or smaller depending on the width of the page.

I have set the fa-modifier size to fa-size=[undefined, true] (Read that true sets the height to the surfaces height).

This results in a page that will not scroll. If I put a fixed height in the fa-size it will work, but that does me no good as the page is responsive and the height is dynamic.

Here is the code for the page:

<fa-app style="height:100%">
  <fa-scroll-view fa-pipe-from="eventHandler">
    <fa-view>
      <fa-modifier fa-size="[undefined, true]">
        <fa-surface fa-pipe-to="eventHandler">
          Misc HTML...
        </fa-surface>
      </fa-modifier>
    </fa-view>
  </fa-scroll-view>
</fa-app>

Here is the simple controller for piping the events.

angular.module('newvitalwallApp')
.controller('MainCtrl', function ($scope, $famous) {
  var EventHandler = $famous['famous/core/EventHandler'];
  $scope.eventHandler = new EventHandler();
});

The live page is on a dev server here if your curious how it is behaving :

http://staging-sqtmp3dxdz.elasticbeanstalk.com/

I am at a loss as to why this is not working.. I am new to famous, but I have scoured the internet for answers on this and have found very little.

Thanks in advance for your input.

steveblue · Accepted Answer · 2014-10-23T22:02:19.877

I just created a service that will handle true for width and height temporarily, but also logged the issue in the f/a issue tracker so hopefully the team will fix.

     var faTrueService = function($famous){

         this.height = function(cl){
            if($famous.find(cl)[0].renderNode._currentTarget !== null && $famous.find(cl)[0].renderNode._currentTarget.children[0] !== undefined){
                return $famous.find(cl)[0].renderNode._currentTarget.children[0].clientHeight;
            }
         };

         this.width = function(cl){
           if($famous.find(cl)[0].renderNode._currentTarget !== null && $famous.find(cl)[0].renderNode._currentTarget.children[0] !== undefined){
               return $famous.find(cl)[0].renderNode._currentTarget.children[0].clientWidth;
           }
         };

       };

In the template, you can now do the following:

    <fa-modifier fa-size="[undefined, faTrue.height('.item-1')]">
    <fa-view fa-index="1">
        <fa-surface class="item-1" fa-pipe-to="pageScrollHandler">

When Surfaces get deployed, a resize event gets attached to the them that forces the Surface to reevaluate it's size, so the Service will get called on resize automatically.

Since you can't just use Services in a template, I created a helper function that calls the Service on the current Controller or Directive scope I'm working with.

            //temp fix for true
            $scope.faTrue = {
              height : function(cl){
                return faTrue.height(cl);
              },
              width : function(cl){
                return faTrue.width(cl);
              }
            };

The child .fa-surface being targeted might have to get the following styling for this to work:

.fa-surface{
    overflow:hidden;
    height:auto;
    width:auto;
}

I don't understand why the previous answer uses the callback for sync, this doesn't make sense, especially since the size is getting reevaluated on resize of Surfaces, not on an event attached to the scrollview.

Since all the children of the Scrollview now have height, it will automatically adjust it's height as well in Famo.us 0.3.0

Thanks. This make sense, unfortunately I cannot test it for a while. I used sync because I was specifically trying to scroll the page, so it was the logical trigger for my use. Mine fixed it, but I was sure there was a better way. — bennewton999, Oct 23 '14 at 18:20
This works great. The only thing, I had to add an extra ```$famous.find(cl)[0]``` check because I had two different surface types with different class names. — pasine, Oct 24 '14 at 12:17

score 0 · Answer 2 · answered Oct 19 '14 at 16:36

So, though I do feel setting the size of the fa-modifier to [undefined,true] should be enough to set the height of the scrolled content, it's not enough.

So I added function that checks the height of the content on scroll and updates the fa-size dynamically. Here's the code I added the original controller:

$scope.$on('$viewContentLoaded', function(){
  $famous.find('fa-scroll-view')[0].renderNode.sync.on('start', function(event) {
    var test = angular.element( document.querySelector( '#test' ) );
    $scope.testHeight = test[0].clientHeight;
  });
});

$scope.getTestHeight = function() {
  return $scope.testHeight;
}

Then I changed the fa-size in the view to [undefined, getTestHeight()]

There very well may be a better way of doing this, and ultimately I think it should be handled automatically by famous-angular, but for now this solves it.

Scroll-view not scrolling with surface fa-size [undefined,true]

2 Answers2