Make Embedded Tableau Responsive

Question

Make Embedded Tableau Responsive

http://www.tableau.com/learn/gallery/company-performance

The Embed Code as following:

<script type='text/javascript' src='http://public.tableau.com/javascripts/api/viz_v1.js'></script>
<div class='tableauPlaceholder' style='width: 944px; height: 789px;'>
<noscript>
<a href='http:&#47;&#47;www.tableau.com&#47;learn&#47;gallery'>
<img alt='Tale of 100 Entrepreneurs  ' src='http:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Ta&#47;Tale-of-100-Entrepreneurs_14&#47;Taleof100Entrepreneurs&#47;1_rss.png' style='border: none' />
</a>
</noscript>
<object class='tableauViz' width='944' height='789' style='display:none;'>
<param name='host_url' value='http%3A%2F%2Fpublic.tableau.com%2F' /> 
<param name='site_root' value='' />
<param name='name' value='Tale-of-100-Entrepreneurs_14&#47;Taleof100Entrepreneurs' />
<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;Ta&#47;Tale-of-100-Entrepreneurs_14&#47;Taleof100Entrepreneurs&#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' />
<param name='showVizHome' value='no' />
<param name='showVizHome' value='no' />
<param name='showTabs' value='y' />
</object>
</div>

When embedded into web page, it is not responsive.

How to make it responsive?

Slovak

Just use percentages for the height and width. – Picoline

Answer 1

I assume you want only the tableau view you have embedded in your website to be responsive?

If yes, set the size of the dashboard to Automatic. This will allow the dashboard to adjust its size automatically based on the size the div appears.

To make the div responsive create a css for the div.

Calcariferous