Databases
StackOverflow2013
Postsdbo
POfb:comment is setting wrong height (cuts comments in half)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POfb:comment is setting wrong height (cuts comments in half)
    primarykey
    data
    text
    <p>I'm building a GWT application and am trying to dynamically add facebook comment boxes in certain places. This is working fine, except that the facebook SDK isn't calculating the height correctly. It always sets it at 160px. </p> <p>This means that only half of the first comment is visible, even if there are multiple comments (i.e. it gets visibly cut in half). If I use the same code outside of GWT it works fine (i.e. the height is calculated correctly).</p> <p>Does anybody know how the facebook SDK calculates the height of the box? Or what else I can try?</p> <hr> <p>The details:</p> <p>I initialise the facebook SDK as follows:</p> <pre><code>public static native void initFacebookSDK() /*-{ window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : '&lt;my-app-id&gt;', // App ID from the App Dashboard channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication status : true, // check the login status upon init? cookie : true, // set sessions cookies to allow your server to access the session? xfbml : true // parse XFBML tags on this page? }); // Additional initialization code such as adding Event Listeners goes here }; // Load the SDK's source Asynchronously (function(d, debug) { var js, id = 'facebook-jssdk', ref = d .getElementsByTagName('script')[0]; if (d.getElementById(id)) { return; } js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js"; ref.parentNode.insertBefore(js, ref); }(document, false)); }-*/; </code></pre> <p>I add the div as follows:</p> <pre><code>//_root is a vertical panel _root.add(new HTML("&lt;div id=\"mydiv\"&gt;&lt;/div&gt;")); </code></pre> <p>and then I populate the div like this:</p> <pre><code>public static native void showComments(String currentUrl_) /*-{ var mydiv = $doc.getElementById('mydiv'); mydiv.innerHTML = "&lt;fb:comments href='" + currentUrl_ + "' num_posts='5' width='422'&gt;&lt;/fb:comments&gt;"; FB.XFBML.parse(mydiv); }-*/; </code></pre> <p>The problem is that the facebook SDK always populates the div with the following:</p> <pre><code>&lt;span style="height: 160px; width: 422px;"&gt; &lt;iframe ...&gt;...&lt;/iframe&gt; &lt;/span&gt; </code></pre> <p>whereas if I don't use GWT, the height parameter changes appropriately, e.g:</p> <pre><code>&lt;span style="height: 1469px; width: 422px;"&gt; &lt;iframe ...&gt;...&lt;/iframe&gt; &lt;/span&gt; </code></pre> <p>Hope someone can help.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTom G
    1. USTom G
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload