Div resizing based on SDK content

0
I'm using an external SDK to display some content in our mobile app.  This has been accomplished using two HTML snippets, one for the container and one for the SDK. Problem I am having is that the content is being cut off unless I hardcode the height of the container which isn't ideal because some screens that will show will be cut off and others could be exceptionally long. I'm trying to find a solution that the div container (or other suggestion) automatically resizes the height based on the content. Another variable is that with using the SDK I have limited access to the CSS.  I can only modify what's existing and cannot add any new classes.
asked
3 answers
0

Hi Andrew,

 

It sounds like the SDK is using an iFrame? Is this right? 

If so this is always a problem when using iFrames, because the content is loaded outside the main website dom. So the height is always calculated incorrectly.

You have a couple of options to try to fix this. I believe there is some handy javascript libraries that help with calculating the height of the iFrame. 

Your other option is use V height css option. This is a much easier way of making sure your iframe fits the entire space. Rather than using 100% height and data being cut off. Because 100% of a height that is yet to be calculated will always cut content off.

.class{
    height: 100vh;
    overflow-y: scroll;
}

 

answered
0

Based on the quote you shared from the SDK, it looks like you're working on integrating with Support.com, and it sounds like you've moved from option 1 (Embed API) to option 2 (JavaScript API) in this article. So, I don't think you should have an iframe anymore. If the content is just getting placed in a div, you should just be able to remove any height styling on that div to allow it to grow to whatever height it needs to.

Can you share with us the DOM structure of your page as it renders in your browser? Perhaps we can see where things go wrong.

 

UPDATE:

Check out this part of the SDK article. I think it's intended to solve your problem, as it registers a callback function that you can use to set the height of the iframe.

Resize - In case an embedding application wants to resize it’s height based on the loaded content height then you should register your callback handler to onSelfserviceContainerHeightChange.
Callback handler passed to this method is invoked whenever content height is changed.

NexusConnectSDK.onSelfserviceContainerHeightChange(function (height) {
  var $frame = $('iframe');
  if($frame.length) {
    $frame.css('height', height);
  }
});
answered
0
<div id="helpContainer" style="display: block; width: auto; height: 200vh;"><iframe title=" Self-Service content" src="https://advdiag.nexus.support.com/api/selfservice/v1.1.1/startSelfHelp?session_id=1128664&amp;session_context_id=10832&amp;session_device_id=956327&amp;auth_token=...-12M&amp;options=%7B%22phone%22%3A%221-800-GETHELP%22%2C%22skill%22%3A%22sales%22%2C%22remoteConnectionType%22%3A%22remote%22%7D&amp;lang=en&amp;display_order=search%2Ccategories%2Cpaths%2Ccontact_us" height="97%" width="100%" style="border: 0px;"></iframe></div>

<iframe title=" Self-Service content" src="https://advdiag.nexus.support.com/api/selfservice/v1.1.1/startSelfHelp?session_id=1128664&amp;session_context_id=10832&amp;session_device_id=956327&amp;auth_token=...-12M&amp;options=%7B%22phone%22%3A%221-800-GETHELP%22%2C%22skill%22%3A%22sales%22%2C%22remoteConnectionType%22%3A%22remote%22%7D&amp;lang=en&amp;display_order=search%2Ccategories%2Cpaths%2Ccontact_us" height="97%" width="100%" style="border: 0px;"></iframe>

 

This is the snippet we added to the SDK.js file to initialize the feature we are incorporating.

NexusConnectSDK.initialize("TOKEN");
  NexusConnectSDK.setDisplayOrder(["search","categories","paths","contact_us"]);
  NexusConnectSDK.setContactUsOptions({"phone":"1-800-GETHELP","skill":"sales","remoteConnectionType":"remote"});
  NexusConnectSDK.preserveContext(true)
  var containerElement = document.getElementById("helpContainer");
  NexusConnectSDK.showSelfHelpForId("text",containerElement).then(
      function(){
    	  containerElement.style.display = "block";
          console.log("Success!");
      }, function(error){
          console.error("Error: " + error);
      }
  );

 

The "helpcontainer" is the additional HTML snippet used to contain the content rendered from SDC iframe that you see in the first snippet at the top.  I tried running it without housing in a container but came with really bad results as it just overlaid itself over the entire mobile app.

 

answered