5 Replies Latest reply on Feb 8, 2018 3:43 PM by Chris McClellan

    Device Layout Detection in Embedded Dashboards?


      Pretty simple question here but I can't seem to find the answer anywhere...  When embedding a Tableau dashboard on a website, will the dashboard serve up the correct device layout (e.g. phone, tablet, desktop) based on the device you're browsing the website/dashboard on?  In this case the embedded dashboard is being served up by Tableau Server 10.1


      I have a company website that I'm embedding Tableau dashboards on, and the website itself is responsive, i.e. it adapts to mobile devices.  However, no matter what I do, it looks like the embedded dashboards on the site don't adapt to the device, even though I have created a phone layout in Tableau for the dashboard and the rest of the website does.  It does however work when I view the dashboard through Tableau Server.


      So does the device layout functionality in Tableau not work in embedded dashboards? Or am I missing something?

        • 1. Re: Device Layout Detection in Embedded Dashboards?
          Wim Kegels

          Hi Arthur,


          Tableau should automatically show the correct layout depending on your screen size.  Have you checked following documentation?


          Embed Dashboards


          Perhaps during embedding, you've accidently set a device parameter? Or your mobile devices are using high-def screens.



          Kind regards,


          • 2. Re: Device Layout Detection in Embedded Dashboards?

            Hi Wim, thanks for the link to the embed documentation! I also had a look at the online help guide to see if I was missing anything with how to setup the dashboard within Tableau Desktop.  Based on everything, I feel like I have the layouts setup correctly within Desktop, but the embed is still not acting as described within the Embed documentation.  The device layouts do display correctly when viewing the dashboard all by itself (via copying and pasting the share URL in a web browser), but when embedding the dashboard using the embed code on my site, it's still not working--it always displays the default layout no matter what.


            However, I had a closer look at the embed code that I'm pulling from the Tableau Server's share options, and I noticed this difference between what's described in the Embed Documentation, and my code:


            Code as shown in the Embed Dashboards documentation that Wim linked to:


            <script type='text/javascript' src='http://mysite.myserver.com/javascripts/api/viz_v1.js'></script>

              <div class='tableauPlaceholder' >                                                  

              <object class='tableauViz' width='100%' height='100%' style='display:none;'>

              <param name='host_url' value='http://mysite.myserver.com' />

              <param name='site_root' value='' />

              <param name='name' value='ProfitAnalysis/Sales_Dashboard' />

              <param name='tabs' value='yes' />

              <param name='toolbar' value='yes' />

              <param name='filter' value=':original_view=yes' /></object></div>


            Code as pulled from my Tableau Server embed code:


            <script type='text/javascript' src='https://mysite.myserver.com/javascripts/api/viz_v1.js'></script>

            <div class='tableauPlaceholder' style='width: 904px; height: 836px;'>

            <object class='tableauViz' width='904' height='836' style='display:none;'>

            <param name='host_url' value='http://mysite.myserver.com' />

            <param name='site_root' value='' />

            <param name='name' value='MobileTestDashboard' />

            <param name='tabs' value='no' />

            <param name='toolbar' value='yes' />

            <param name='showShareOptions' value='true' /></object></div>


            You'll notice that the parts that I underlined are different between the two embed codes.  Specifically, my embed code has width and height values specified in pixels for the tableauPlaceholder div, whereas the example doesn't.  Then the object tag in my embed code also has specific dimensions specified, whereas the example code has them set to 100%.  Could this be the culprit to why the dashboard doesn't adapt to screen size when I embed it on my site?  It would seem so, since it looks like the tableauPlaceholder div essentially 'fixes' the size of the dashboard to a set size.  However, when I remove the dimensions from the tableauPlaceholder div and also set the width and height on the object tag to 100%, it breaks the dashboard in that it serves up the phone layout in all cases, causes the width to fill up the full width of the webpage, and in particular, the height gets set to a very small value no matter how big or small the web browser window is or the size of the device screen.


            Any idea why my embed code generates the specific dimensions?

            • 3. Re: Device Layout Detection in Embedded Dashboards?
              Wim Kegels

              Hi Arthur,


              I imagine the specific dimensions are indeed what caused your problem.   I honestly have no idea what causes your néw problem though.  Have you tested it on different browsers?


              This might also have something to do with your viewport settings in the css file. 


              Good luck, and please keep us updated!


              Kind regards,


              • 4. Re: Device Layout Detection in Embedded Dashboards?
                Rahul Tokase



                please refer to the given link where they have mention tableau will look for the maximum dimensions whether its going to be width or height.


                Embed Dashboards


                If the largest dimension is...This dashboard device layout is displayed...
                500 px or lessPhone
                501– 800 pxTablet
                801+ pxDesktop/Laptop
                • 5. Re: Device Layout Detection in Embedded Dashboards?
                  Chris McClellan

                  Did you ever find the solution to this ?