Resolving Issue with Loading an Embedded View

Product(s): Tableau Public, Tableau Public Premium, Tableau Server
Version(s): All
Last Modified Date: 19 Jun 2014

Article Note: This article is no longer actively maintained by Tableau. We continue to make it available because the information is still valuable, but some steps may vary due to product changes.

Tableau views are often embedded into webpages that contain custom CSS. There may be cases when the Tableau embed code is encased by an element, for example. When this element uses the CSS property display:none, Tableau cannot load the embedded view. To resolve this issue, you can do one of the following:
  • Change the CSS property to visibility:hidden instead.  This property will hide the view, but it will take up the space it needs on the page for the view. For example:
<div id=”Sample” style=”visiblility:hidden”>
<Tableau embed code>
  • Set the position of the element off screen. Setting the position of the element off screen will allow the view to load completely before it is positioned back onto the screen. The effect is similar to what you would expect from using display:none.  For example:
<div id=”Sample” style=”top:9999;left:-9999”>
<Tableau embed code>
Alternate Search Terms:embedding, CSS, code, tableau public view, tableau server view, tableau digital view
Did this article resolve the issue?