Link to home
Start Free TrialLog in
Avatar of drupal_100
drupal_100Flag for United States of America

asked on

Make Embedded Tableau Responsive

Make Embedded Tableau Responsive

http://www.tableau.com/learn/gallery
The #3 Company Performance has 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://www.tableau.com/learn/gallery'><img alt='Tale of 100 Entrepreneurs  ' src='http://public.tableau.com/static/images/Ta/Tale-of-100-Entrepreneurs_14/Taleof100Entrepreneurs/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://public.tableau.com/static/images/Ta/Tale-of-100-Entrepreneurs_14/Taleof100Entrepreneurs/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?
ASKER CERTIFIED SOLUTION
Avatar of Alicia St Rose
Alicia St Rose
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I see, you have provided fixed width and height which is stopping page Responsive; check below codes
....<div class='tableauPlaceholder' style='width: 944px; height: 789px;'>...
....<object class='tableauViz' width='944' height='789' ......
Remove fixed width and height and give it in % like : width:100%;
also provide min-width and min-height as per your need (and device specific CSS)