Saturday, November 9, 2013

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.

No comments:

Post a Comment