3 Replies Latest reply on Nov 21, 2016 6:14 AM by Pablo Betancourt

    responsive embed on iframe

    Pablo Betancourt

      Hi friends, I'm testing tableau for the first time.

      I'm using the "Automatic" size option to get the dashboard responsive (width and height adapt to the window browser's size) and it works ok on Tableau site:

      Tableau Public

      But when use the embed code and paste it to my iframe I lose the responsive height, while the witdh is responsive.

      http://www.unmosquito.com/bicentenario/tableau/Tableau.html

      If I want to create a blank .html page containing my dashboard only, which code would I need? Then I can try to ad that page to my iframe.

      Many thanks!

       

      Pablo

        • 1. Re: responsive embed on iframe
          John Croft

          Is there no way for you to edit the code when you past it into the html editor? Just using google, I can play with you page and change the height to 100% vs the 1428 that was shown.

           

          • 2. Re: responsive embed on iframe
            Pablo Betancourt

            That's exactly what I need, but I don't know how to change that on my iframe because the code I paste is different from this one, and if I try to put 100% percentage as a value it doesn't work.

             

            This is the code that tableau gives me to embed:

             

            <div class='tableauPlaceholder' id='viz1479002317928' style='position: relative'><noscript><a href='http:&#47;&#47;www.unmosquito.com&#47;bicentenario&#47;tableau&#47;Tableau.html'><img alt='Dashboard 1 ' src='http:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Co&#47;ColumnaPasodeLaCumbre&#47;Dashboard1&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='http%3A%2F%2Fpublic.tableau.com%2F' /> <param name='site_root' value='' /><param name='name' value='ColumnaPasodeLaCumbre&#47;Dashboard1' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='http:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Co&#47;ColumnaPasodeLaCumbre&#47;Dashboard1&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1479002317928');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

            • 3. Re: responsive embed on iframe
              Pablo Betancourt

              On other forum I got this answer:

              "I suspect this is how they are coding the responsiveness. Notice that if you reload the page at different widths, it will represent different heights. One workaround would be to check 'zoom contents' which will use transformation scaling on the element and thus not communicate size changes, but it also means the content is likely to look blurry if it needs to magnify."

               

              So there is no way to just paste the code and get a flexible layout on both sides?