Question

I have been trying to fix this for a while but I have had no luck. I have a facebook app (witdh: 510) that keeps including scroll bars. This is how it looks in facebook:

There is nothing in my application that will has a width greater then 510, so I am confused as to why there is white space in the first place. I also do not understand why there is a vertical scroll bar because there is clearly enough room on page to fit the app.

In my settings for the app Auto resize is called and I have FB.Canvas.setAutoResize(); in my window.fbAsyncInit function. I also tried using a CSS Reset <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> but that did not clear the issue.

Any suggestions?

Answer 1

If you are certain that the dimensions of your iFrame will always show the content, then you could just set:

<iframe src="yourpage.htm" scrolling="no"></iframe>

scrolling=”no” will force the iFrame to NOT show scrollbars, even if content is bigger than the frame.

That should be a sure-fire way to NOT show scrollbars, but should be used cautiously and you should know that content may end up hidden with no apparent way for the user to scroll to it, if it extends beyond the bounds of the iFrame.

–edit–

Since you apparently can’t set this on Facebook, you should simply wrap the page you’re loading in a wrapper div and set the height, width, and overflow properties there.

<div class="wrap" style="height:500px;  width:510px;  overflow:hidden;">
  your page content here
</div>

You can use overflow:hidden; for no scrollbars, or overflow-x:hidden; for only hiding the horizontal scrollbar, or overflow-y:hidden; for only hiding the vertical scrollbar.