FB.Canvas.setAutoGrow() Problems with React JS

Question

I'm using the Facebook JavaScript SDK inside of a React JS app.

As per the documentation , I'm calling FB.Canvas.setAutoGrow() after the SDK is loaded in.

window.fbAsyncInit = function () {
    FB.init({
        appId: FACEBOOK_APP_ID,
        xfbml: true,
        version: 'v2.5'
    });

    FB.Canvas.setAutoGrow();

    ReactDOM.render(routes, document.getElementById('app'));
};

The FB.Canvas.setAutoGrow() method runs a 100ms interval that resizes the canvas to fit the content of an app, however I still see a scroll in the app.

I'm using React Router , so the app is a single page app, which is what I think might be causing the problems for me. Is this the case or am I doing something else incorrectly?

Answer 1

I am using React (and React Router) for Facebook Apps too, should be completely irrelevant for your case. Make sure the content width is 810px max, else it will show both scrollbars. You can also use overflow:hidden to hide the scrollbars. I could tell more with a test link.

Edit: It does not work with height:100% , set your container to a fixed height or remove the height setting.