Skip to main content
Setting the iframe height larger than the height of embedded dashboard is important to avoid scroll traps on mobile and double scroll bars on desktop. This is done by listening for the rendered height and setting the iframe container dynamically. Many embed customers choose to add a few more extra pixels to the height just to be sure the content is not pushed into a scrollable state. Here are two examples for how this can be done whether you have a single iframe or multiple iframes on the same page, as documented here.

​
Single and Multiple iframe Examples

Use the following Dynamic iframe height code examples to help avoid scroll traps:

​
Single iframe:

<html>
  <head>
    <script>
      window.addEventListener("message", receiveMessage, false);
      function receiveMessage(event) &#123;
        //if we get some data back
        if (event.data && event.data.params && event.data.params.height) document.getElementById("iframe1").style.height = event.data.params.height;
      &#125;
    </script>
  </head>
  <body>
    <iframe
      id="iframe1"
      src="https://public.domo.com/embed/pages/abcde"
      width="100%"
      height="1620"
      marginheight="0"
      marginwidth="0"
      frameborder="0"
    ></iframe>
  </body>
</html>

​
Multiple iframes:

(loop through the responses and determine which came from which source. Add a couple additional px to the height in order to take into account scroll bars that could just barely push things into a scrollable state) 
<html>
  <head>
    <script>
       window.addEventListener("message", receiveMessage, false);
           function receiveMessage(event) &#123;
              var frames = document.getElementsByTagName('iframe');
              for (var i =0; i <frames.length; i++) &#123;
                 //loop through the responses and determine which came from which source
                  if (frames[i].contentWindow === event.source) &#123;
                  if (event.data && event.data.params && event.data.params.height) frames[i].style.height = event.data.params.height + 15;
                   &#125;
             &#125;
      &#125;
    </script>
  </head>
  <body>
    <iframe
      id="iframe1"
      src="https://public.domo.com/embed/pages/abcde"
      width="100%"
      height="1620"
      marginheight="0"
      marginwidth="0"
      frameborder="0"
    ></iframe>
    <iframe
      id="iframe2"
      src="https://public.domo.com/embed/pages/fghij"
      width="100%"
      height="1620"
      marginheight="0"
      marginwidth="0"
      frameborder="0"
    ></iframe>
  </body>
</html>