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?

回答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.

来源：https://stackoverflow.com/questions/31838352/make-embedded-tableau-responsive

标签

javascript

css

tableau