3

I am trying to embed a tableau object that uses javascript and params to create an iframe on a site

an example of the embed html is

 <script type='text/javascript' src='https://tableau.site.edu/javascripts/api/viz_v1.js'></script>
 <div class='tableauPlaceholder' style='width: 704px; height: 304px;'>
   <object class='tableauViz' width='704' height='304' style='display:none;'>
     <param name='host_url' value='https%3A%2F%site.net.edu%2F' />
     <param name='site_root' value='' /><param name='name' value='DepartmentGoals&#47;DeptGoalsDashboard' />
     <param name='tabs' value='no' /><param name='toolbar' value='no' /></object>
 </div>

I attempted what the docs say about responsive embed but I am not having much luck

<div class="tableauPlaceholder embed-responsive embed-responsive-16by9">
       <object class='tableauViz embed-responsive-item' style='display:none;'>
         <param name='host_url' value='https%3A%2F%site.net.edu%2F' />
         <param name='site_root' value='' /><param name='name' value='DepartmentGoals&#47;DeptGoalsDashboard' />
         <param name='tabs' value='no' /><param name='toolbar' value='no' /></object>
</div>

UPDATE

i visited the tableu docs and can use a direct iframe without using the javascript API and object with params to create an iframe

so my updated code is this, the embed happens correctly but the iframe is not responsive, it has a massive padding at the bottom

<div class="row">

    <div align="center" class='embed-responsive embed-responsive-16by9'>
      <iframe class='embed-responsive-item' src="https://tableau.site.edu/views/..." width="704" height="304"></iframe>
    </div>

</div>
Jay Rizzi
  • 4,196
  • 5
  • 42
  • 71
  • For starters, this doesn't load https://tableau.site.edu/javascripts/api/viz_v1.js, and why is `style='display:none;'` in your markup? – Carol Skelly Mar 27 '15 at 13:04
  • i just left the JavaScript portion out of what i have attempted as a code example for brevity...display none is there to prevent flash of unstyled content prior to the object being ready – Jay Rizzi Mar 27 '15 at 16:14
  • What do you mean by "it still doesn't work?". Do you get nothing displayed in the iframe? or you just don't like the amount of padding at the bottom? Try simplifying it down to the most bare bones possible. If you remove bootstrap, all css, just embed your iframe in a bare shell of an html wrapper, does it work then? Do you get any information in the browser console or inspector? – Alex Blakemore Apr 01 '15 at 02:12
  • sorry let me clarify, the iframe embeds but it is not responsive, and i get a massive pad on the bottom – Jay Rizzi Apr 01 '15 at 17:40
  • 1
    ok, one easy quick test would be to change the src attribute on your iframe tag to point to some very simple static page, leaving Tableau server out of the picture. If you can still reproduce the behavior, you can then try to debug it with one less moving part in the mix. If it starts working, then you have evidence that there is some interaction with Tableau server and your HTML, CSS, Javascript. Either way, you'll have a little more data to help decipher the problem. – Alex Blakemore Apr 02 '15 at 03:24
  • Was a really good suggestion, in doing i find that the object itself is not responsive, it is a fixed width style graph, so thats why it was behaving so wonky – Jay Rizzi Apr 03 '15 at 00:43

1 Answers1

4

Your iframe is most likely not responsive because you are setting a width and height.

Try something more like: 

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe> <!--note: no width/height in the iframe -->
</div>

Source: http://getbootstrap.com/components/#responsive-embed

Kandice
  • 106
  • 2