title: Facebook's condensed multi friend selector layout and rendering
body: <p>This is my first time working on a facebook app. I created an iframe app (i.e selected 'iframe' as the 'canvas type' when registering the app). I have this situation where there is a multi friend selector form in the sidebar of the app (which has a width of about 200px).
  <strong>Screenshot:</strong> <a href="https://i.stack.imgur.com/Tcdn9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tcdn9.png" alt="alt text"></a>
   </p>
  
  <p>The relevant code for generating that form is as follows (except the <em>html</em> tag which is part of the app layout):</p>
  
  <pre><code>&lt;html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns="http://www.w3.org/1999/xhtml"&gt;
  
   // some layout markup here for the whole app....
  
  &lt;div id="sidebar"&gt;  // place a condensed friend selector here
  &lt;fb:serverFbml&gt;
      &lt;script type="text/fbml"&gt;
            &lt;fb:fbml&gt;
               &lt;fb:request-form action="invite_url" content="
            Hey! a form!" invite="true" method="post" type="sample"&gt;
                  &lt;fb:multi-friend-selector actiontext="Invite your friends to check out this site" condensed="true" exclude_ids="" max="20" showborder="true" style="width: 300px;" /&gt;
                  &lt;fb:request-form-submit label="Send" /&gt;
               &lt;/fb:request-form&gt;
            &lt;/fb:fbml&gt;
       &lt;/script&gt;
  &lt;/fb:serverFbml&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When i click on "Send invitations", i get a confirm dialog box but it appears within the iframe in which the multi-friend selector is placed (thus breaking the layout) and not on the parent iframe where the main app loads.
  <strong>Screenshot:</strong> <a href="https://i.stack.imgur.com/y1gPr.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y1gPr.gif" alt="alt text"></a>
  </p>
  
  <p>I tried the following code (where i remove the <em>fb:serverFbml</em> tag):</p>
  
  <pre><code>&lt;fb:fbml&gt;
   &lt;fb:share-button&gt;&lt;/fb:share-button&gt;
   &lt;fb:request-form type="my_app" method="post" invite="true" content="Form content" action="/action"&gt;
    &lt;fb:multi-friend-selector actiontext="Invite your friends to check out this site" condensed="true" exclude_ids="" max="20" showborder="true" style="width: 300px;"&gt;&lt;/fb:multi-friend-selector&gt;
      &lt;fb:request-form-submit label="Send" /&gt;
  
    &lt;/fb:request-form&gt;
  &lt;/fb:fbml&gt;
  </code></pre>
  
  <p>Here the share button is displayed but the selector form is empty (nothing is rendered inside the <em>fb:multi-friend-selector</em> tag)</p>
  
  <p>I am using the FB initialization code as described here: <a href="https://developers.facebook.com/docs/javascript" rel="nofollow noreferrer">link text</a></p>
  
  <p>How can i fix this issue? Is there something missing in my fb api code?</p>