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? 

Answer 1

• If you want only the tableau view that you have embedded in your website to be responsive, set the size of the dashboard to Automatic. 

• This allows the dashboard to adjust its size automatically based on the size, the div appears.

Interested to learn about Tableau from top experts? Enroll in Tableau Course to get expert guidance.