Search code examples
htmlcssalignmenttableau-apiembed

How can I center my div embedded object? (Currently left aligned)

New to html and css and I'm trying to embed a Tableau dashboard (using a random dashboard as an example)

Left aligned, not centered

But it's being left aligned instead of center. Something that may have fed into this problem is that I'm using padding for the content. Here are the relevant sections extracted:

HTML:

<div class="container-fluid">
              <div class="row">
                <div class="col-xs-12 ">
                  <nav>
                    <div class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
                      <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
                      <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
                      <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
                    </div>
                  </nav>

                  <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="container-fluid">


                TABLEAU EMBEDDED CODE--->     <div class='tableauPlaceholder' id='viz1591736430373' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='TheStampsinmyPassport&#47;TheStampsinmyPassport' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#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='filter' value='mobile=' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1591736430373');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1650px';vizElement.style.height='927px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

CSS:

.tab-content{
  background: rgb(254, 254, 254);
    line-height: 25px;
    border-top:5px solid #006950;
    border-bottom:5px solid #006950;
    border-left:none;
    border-right:none;
    padding:30px 25%;

}

Here is the raw embedded code Tableau provides:

<div class='tableauPlaceholder' id='viz1591742882598' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='TheStampsinmyPassport&#47;TheStampsinmyPassport' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#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='filter' value='mobile=' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1591742882598');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1650px';vizElement.style.height='927px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

I tried doing

tableauPlaceholder{margin: 0;}

-in CSS to no avail.

I looked at this guide https://tableauing.wordpress.com/2016/10/31/how-to-center-that-viz-css/

And tried

div.myTableauViz {
width: 950px;
margin-left: auto ;
margin-right: auto ;
}

But it couldn't work because I'm using container fluid and really don't know my width. I suppose I'm lost, I don't know if it's my pre-existing padding that's causing this left alignment off center or if it's something in Tableau's embed code. My tinkering around in both did not change the situation.

Thanks for the help!

Solution

  • I commented before:

    I don't use this tool, but I don't see you putting around the embedded code . Therefore the CSS div.myTableauViz {...} does not work.

    Furthermore, point 4. of the explanation says 'Also ensure that your Viz fits this width. In the embed code you can find the width under VizElement.style.width' Which in your case is 1650px (I'm assuming instead of 950px).

    For as far I can see, the below snippet (using 1650px instead of 950px) nicely horizontally centers the 'Tableau' in the viewport.

    The other code is not complete, so it is impossible for now to fully reproduce the problem (should it still persist).

    UPDATE

    You also need to change 25% to 0 in .tab-content { padding: 30px 0 } because it now pushes the entire 'Tableau' 25% of the total browser width to the right. The new <div class="myTableauViz"> will do the centering through the margin-left and margin-right settings.

    UPDATE 2

    After OP posted second pastebin code I found the problem:

    • <div class=”myTableauViz”> pastebin code uses UTF characters as double quote and the browser does not recognize those as being legal double quotes
    • <div class="myTableauViz"> uses proper (plain text) double quotes HTML recognizes

    The extra <div> plus CSS is still required, but ignore the comment on .tab-content

    div.myTableauViz {
  width: 1650px;
  margin-left : auto;
  margin-right: auto;
}
.tab-content {
  background: rgb(254, 254, 254);
  line-height: 25px;
  border-top: 5px solid #006950;
  border-bottom: 5px solid #006950;
  border-left: none;
  border-right: none;
  padding: 30px 25%; /* reverted back to 25% */
/* update 2 ingnore: changed 25% to 0, top/bottom padding only */
}
    <div class="tab-content">
  <div class="myTableauViz">
    <div class='tableauPlaceholder' id='viz1591742882598' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='TheStampsinmyPassport&#47;TheStampsinmyPassport' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#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='filter' value='mobile=' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1591742882598');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1650px';vizElement.style.height='927px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
  </div>
</div>