Tableau Dashboards on iPad - Embedded Javascript to get scrollbars

The iPad (iOS) does not support iFRAMES. So if you have a website where you've embedded a Tableau dashboard in an iFRAME (see my previous post), when you look at it on an iPad, it will be expanded to fit the entire width of the dashboard. Your height / width parameters in the iFRAME will be ignored. If you are ok, with your dashboard being expanded (no scrollbars around the iFRAME) then you are good.

Just to be clear, this has nothing to do with Tableau. This will happen with any iFRAME webpage.

There are cases where you want to keep it to a certain height and width. This post shows how you can do that, but you cannot use an iFRAME. You will have to take the SCRIPT tag that Tableau generates and embed it into the code of your webpage.

What you need to do is after the <SCRIPT> </SCRIPT> tag entry add the following div tag -

<div id="wrapper" style="-webkit-overflow-scrolling: touch; height: 100%; overflow: auto; width: 100%;">
then at the end of all the Tableau generated div, put your closing </div> tag.

This will now allow you to keep your dashboard within a certain height / width and you will get scroll bars on your iPad. Test this viz out to see how it looks on an iPad. I specifically created a really bad dashboard that has multiple scrollbars within the dashboard and really long and wide, so you can see the scrollbars.

btw. the scrollbars inside the dashboard work even when you have an iFRAME.

Learn About Tableau

Tableau Dashboards on an iPad - Using iFRAMES

The iPad (iOS) does not support iFRAMEs. So if you have a Tableau Viz in an iFRAME on your website and you view it on an iPad, you will see that your height and width are ignored and the dashboard is expanded to take over the entire screen. You can view it on a browser on your computer to see the difference. On your computer, the dashboard is kept within the height and width and you get the vertical and horizontal scrollbars. On an iPad it gets expanded. That being said, any scrollbars within the dashboard are still scrollable on the iPad.

Just to be clear, this has nothing to do with Tableau. This will happen with any iFRAME webpage.

In the example below, I set the height and width of the iFrame to 400 / 400, to exaggerate the effect. This is a really bad dashboard from a view-ability standpoint, but it is useful to get the point across. When you view this on an iPad, it starts out as 400 x 400 but when it finishes rendering it gets blown up to fit the entire visualization.