Version 2

    Summary

    You may run into an issue where you have custom content embedded into Jive via an HTML widget, but the widget does not resize correctly, and the content within the widget is cut off or unreadable.

     

    This commonly comes up when customers try to install a Twitter Widget into one of the HTML Widgets. The HTML Widget loads and sizes out the frame on page load, just before the Twitter Widget finishes loading it's own content for the script, thus the page does not know how large to make the widget. As as a result, you end up with a widget that is not sized properly.

     

    Identifying the Problem

    It's pretty easy to spot. Just look for the Twitter Widget or some other script installed into an HTML Widget where the frame cuts it off. See comparison examples below.

     

    Broken Twitter Widget

    Screen Shot 2016-01-07 at 2.14.23 PM.png

    Working Twitter Widget

    Screen Shot 2016-01-07 at 2.15.13 PM.png

     

    Cause

    This is caused because Jive finishes loading the page and resizes the HTML Widget to what it thinks is needed, before the Twitter script finishes loading the remaining content.

     

    Resolution

    Option 1: Wrap your script with a div using a static height

    1. Edit the impacted Overview page and then edit the HTML Widget containing your script
    2. Wrap your script with a div tag using a static height
      <div style="height: 600px;"></div>
    3. The end result should be something like this
      <div style="height: 600px;"><a class="twitter-timeline" href="https://twitter.com/JiveSoftware" data-widget-id="563018623384846337">Tweets by @JiveSoftware</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
    4. Save your Widget and Publish your Overview page
    5. Refresh the page to ensure that it is now working correctly

     

    Option 2: Call the resizeMe script that Jive uses to resize the HTML Widget frame

    Method A: Injected the call for the resizeMe script towards the end of your script, but within the script tags

    1. Edit the impacted Overview page and then edit the HTML Widget containing your script
    2. Inject the action to call the resizeMe script that Jive uses at the end of your script, but still inside the script tags
      setTimeout(resizeMe,1000);
    3. The end result should be something like this
      <a class="twitter-timeline" href="https://twitter.com/JiveSoftware" data-widget-id="563018623384846337">Tweets by @JiveSoftware</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");setTimeout(resizeMe,1000);</script>
    4. Save your Widget and Publish your Overview page
    5. Refresh the page to ensure that it is now working correctly

     

    Method B: Call the resizeMe script after your own and outside of your script tags

    1. Edit the impacted Overview page and then edit the HTML Widget containing your script
    2. Inject the action to call the resizeMe script that Jive uses after your script, outside of your script tags
      <script>
      // Set the pause milliseconds for loading the resize function provided by Jive
      setTimeout(resizeMe,1000);
      </script>
    3. The end result should be something like this
      <a class="twitter-timeline" href="https://twitter.com/JiveSoftware" data-widget-id="563018623384846337">Tweets by @JiveSoftware</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
      <script>
      // Set the pause milliseconds for loading the resize function provided by Jive
      setTimeout(resizeMe,1000);
      </script>
    4. Save your Widget and Publish your Overview page
    5. Refresh the page to ensure that it is now working correctly