Wednesday 4 February 2015

Awesome Tables allowing scrolling on an iPad

-update - December 2015  -unfortunately this hack no longer works....
___________________________________________________________________________


I use Awesome Tables frequently on my sites, and find them really useful - one small annoyance however is that on an iPad it is not possible to swipe to see any columns that are not immediately visible in the view, as the default swipe action is to move the page around, not the table contents.   I have found a way round this, which is a bit of a hack and a bit fiddly, but if your table contains lots of columns and it is essential that the content can be viewed on an iPad, then I hope this solution is of help....  A demo of a working table can be found here

The way this works is that after creating the table you want to use, you then create a separate gadget using the generated code, wrapped within a scroll wrapper <div> with some css which instructs iPADs to swipe the content within that div.

To start, I created a gadget, added some css style overides specific to iPADs in style tags, and then inspected the code generated by the original awesome table and copied it to the gadget, In the code sample below, this is the bit from <iframe height="900" to the closing </script>

An important note is that this only renders exactly how your original table is designed.  If you edit the gadget you don't have the Awesome table UI, and so if you want to change the look feel or functionality, you will need to amend your original table, and re-copy the code to the gadget.


<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="iframe" width="900" height="1600"/>
  <Content type="html">
  <Require feature="dynamic-height"/>
  <![CDATA[
  
  <style>
   
   @media only screen and (device-width: 768px) {
   html {
    overflow-y: hidden
}
    
    .scroll-wrapper {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.scroll-wrapper iframe {
 height: 99%;
  width: 99%;
  margin-bottom: -5px;
}
   }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
 html {
    overflow-y: hidden
}
    
    .scroll-wrapper {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.scroll-wrapper iframe {
 height: 99%;
  width: 99%;
  margin-bottom: -5px;
}
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
 html {
    overflow-y: hidden
}
    
    .scroll-wrapper {
  position: fixed; 
  right: 0; 
  bottom: 0; 
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

.scroll-wrapper iframe {
 height: 99%;
  width: 99%;
  margin-bottom: -5px;
}
}

</style>
   

<div class="scroll-wrapper">

<iframe height="1050" frameborder="0" width="600" src="//kkgeef8a95adr2tsvjoqlq0mu85vkipc-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=https://sites.google.com/site/scriptsexamples/awesome-table.xml&amp;container=enterprise&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=8c887f508e9dc524&amp;libs=core:dynamic-height:setprefs&amp;mid=108&amp;parent=https://sites.google.com/a/nihr.ac.uk/external-demo-site/#up_visualizationType=Table&amp;up_range=A1:AH&amp;up_queryOpt=Where+A+%3E%3D+1&amp;up_categoryCaption=Choose+a+value...&amp;up_backgroundColor=white&amp;up_codeAnalytics&amp;up_ImpressionContenuSidebar&amp;up_pageSize=15&amp;up_download=false&amp;up_mapRegion&amp;up_url=https://docs.google.com/a/nihr.ac.uk/spreadsheets/d/1J2xpo6EuMn_g_hx2XfgH4w3A2b_0ADkf6gTzfIC0pNE/edit%23gid%3D0&amp;up_customCSS=https://342e852e291c4ec2d6331fba2de5db72377c1ee3.googledrive.com/host/0BysVSZMkrof5OWlibzRnVkVEMTg/lifecyclebarsforExternalDemo.css&amp;up_rangeTemplate&amp;up_scriptProxy&amp;up_mapHeight&amp;up_displayOrder&amp;up_dateFormat=MM/dd/yy&amp;up_sheet=Sheet1&amp;st=e%3DAIHE3cCPvWKyJFWXCjMLpYB8PLczZbggMQQeFD05ADqRZwk3VHxcGTs40mZKzs5UTVaWBdNvXXOigzGWxKPK8Z%252FUKBXPrSfpXqnVNNJEbxMhChBNWMHTBX0wVGuX%252FtJUlAngUfQ9sNKM%26c%3Denterprise&amp;rpctoken=7741563352861330227" class="igm" allowtransparency="true" name="1506222097" id="1506222097" scrolling="auto" title="Awesome Table (with interactive controls, using Google Sheets)" style="height: 1016px;"></iframe><script>JOT_postEvent('registerForRpc', this, ['7741563352861330227', 1506222097, '//kkgeef8a95adr2tsvjoqlq0mu85vkipc-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url\75https://sites.google.com/site/scriptsexamples/awesome-table.xml\46container\75enterprise\46view\75default\46lang\75en\46country\75ALL\46sanitize\0750\46v\758c887f508e9dc524\46libs\75core:dynamic-height:setprefs\46mid\075108\46parent\75https://sites.google.com/a/nihr.ac.uk/external-demo-site/#up_visualizationType\75Table\46up_range\75A1:AH\46up_queryOpt\75Where+A+%3E%3D+1\46up_categoryCaption\75Choose+a+value...\46up_backgroundColor\75white\46up_codeAnalytics\46up_ImpressionContenuSidebar\46up_pageSize\07515\46up_download\75false\46up_mapRegion\46up_url\75https://docs.google.com/a/nihr.ac.uk/spreadsheets/d/1J2xpo6EuMn_g_hx2XfgH4w3A2b_0ADkf6gTzfIC0pNE/edit%23gid%3D0\46up_customCSS\75https://342e852e291c4ec2d6331fba2de5db72377c1ee3.googledrive.com/host/0BysVSZMkrof5OWlibzRnVkVEMTg/lifecyclebarsforExternalDemo.css\46up_rangeTemplate\46up_scriptProxy\46up_mapHeight\46up_displayOrder\46up_dateFormat\75MM/dd/yy\46up_sheet\75Sheet1\46st\75e%3DAIHE3cCPvWKyJFWXCjMLpYB8PLczZbggMQQeFD05ADqRZwk3VHxcGTs40mZKzs5UTVaWBdNvXXOigzGWxKPK8Z%252FUKBXPrSfpXqnVNNJEbxMhChBNWMHTBX0wVGuX%252FtJUlAngUfQ9sNKM%26c%3Denterprise\46rpctoken\0757741563352861330227'])</script>

</div>

  ]]>
  </Content>
</Module>

A strange quirk is that when you upload the gadget to host it, you appear to need to save this as an html file and upload. e.g. ATgadget.html. Once you have uploaded it to your Drive, you can rename this as xml. e.g. ATgadget.xml
The gadget can then be uploaded to your site using the insert gadget by URL method.

 Hope this of interest, any comments, questions, or code improvements welcomed!