0 Replies Latest reply on Jun 15, 2013 8:15 AM by frank.bracco

    Tableau Public Visual Has Scrollbars when embedded with Reveal.Js Webpage


      Okay, I realize this is less of a Tableau issue and more of Reveal.Js/CSS issue, but I could really use some help. If there are any freelancers out there, I'm even willing to provide a couple bucks (does $25 sound reasonable?) because I'm really lost on this one. I've been playing with this for hours and I haven't came up with any real solutions.


      I really don't like the way Tableau Public does tabs, so my idea was to use Reveal.Js to create a  presentation where individuals could walk through each visualization like it was its own slide. There would also be some introductory slides to provide some background info and whatnot. Basically, when I embed Tableau Public's object code into the webpage, it ends up having scrollbars - no matter what size workbook or no matter how I play with the object and div class sizes that Tableau provides when you upload the presentation to the server.


      The embedded object is a Tableau Public workbook. You can check it out here: http://public.tableausoftware.com/views/BudgetBookcampFY14/AdHocDrilldown?:embed=y&:display_count=no




      The actual workbook (or dashboard) is sized to width:900 and height: 550. But neither one of those really seem to matter for the purposes of what I'm doing. To embed the object, I use the following code:


      <script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js">


      <div class="tableauPlaceholder" style="width:904px; height:619px;"><noscript>

      <a href="#"><img alt="Ad Hoc Drilldown " src="http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;Bu&#47;BudgetBookcampFY14&#47;AdHocDrilldown&#47;1_rss.png" style="border: none" />


      <object class="tableauViz" width="904" height="619" style="display:none;">

      <param name="host_url" value="http%3A%2F%2Fpublic.tableausoftware.com%2F" /><param name="site_root" value="" /><param name="name" value="BudgetBookcampFY14&#47;AdHocDrilldown" />

      <param name="tabs" value="no" /><param name="toolbar" value="yes" />

      <param name="static_image" value="http:&#47;&#47;public.tableausoftware.com&#47;static&#47;images&#47;Bu&#47;BudgetBookcampFY14&#47;AdHocDrilldown&#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="no" /></object>




      Now, the object embeds fine without scroll bars in IE9, Opera, or Google when now using you comment out the div class reveal. Example: http://houstonrestaurantinspections.com/budgetbootcamp/minitest.html#/Full-Budget (about 3/4th down the page). That how I want it to render in the presentation: no scrollbars on the embedded object.


      But, them moment you uncomment the div class and put it back into presentation mode, scrollbars appear around the object: http://houstonrestaurantinspections.com/budgetbootcamp/test.html#/Ad-Hoc


      I've tried changing the object size information, the div class style, the workbook size in tableau, and I've even fiddled a bit with the reveal.js and reveal.min.css, but to no avail. I'm not the best when it comes to sizing all all of the nuisances on CSS (I'm rather a novice on that front, actually), so I could really use some advice here on how to advance this forward. I can chat here, by phone, by e-mail, or even IRC if anyone is willing to devote some time to it with me or provide me some guidance. I suspect it has to do with the way reveal pads an object or a div class or something along those lines, but I'm not really sure.


      I've also posted this up on StackOverflow: http://stackoverflow.com/questions/17124449/reveal-js-causes-scroll-bars-on-embedded-object


      And, I'm also up to new approaches if Reveal.Js isn't the right way to go.