CODEWITHSUNDEEP
mobilegoogle-apps-scripttwitter-bootstrap-3
user844597
user844597

Reputation: 35

Mobile Viewing for Google Apps Script with Bootstrap

I am trying to design a mobile first web app using Google Apps Script.

I would try to replicate the most basic Bootstrap page (http://getbootstrap.com/examples/navbar) in a Google Apps Script.

This is the way the bootstrap page should render on my mobile device:

enter image description here

but instead my page loads like this (ie. http://goo.gl/yZpgUg):

enter image description here

This is my code.gs:

function doGet() {
  return HtmlService
      .createTemplateFromFile('index')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

My index.html is copied and pasted from http://getbootstrap.com/examples/navbar with CDNs replaced as appropriate.

I figured HtmlService.SandboxMode.NATIVE was important to get this to work but doesn't seem to work.

Dear world - any help would be greatly appreciated.

Cheers.

UPDATE 1 - (THANKS FOR YOUR RESPONSES!)

in IFRAME: enter image description here

IFRAME console errors (2): enter image description here

NATIVE console errors (lots): enter image description here

Bottom line - clearly GAS is not liking it and doesn't seem super straight forward - I've ended up turning the GAS into an API which returns JSONP from the spreadsheet I need - much more straight forward. Thank you for all your help!

Upvotes: 1

Views: 3488

Answers (2)

Arun Aruljothi
Arun Aruljothi

Reputation: 51

I know you decided to go another route, but I got this to work in the same scenario. You can simply add the meta tag on the GAS code using the following code:

var output = HtmlService.createHtmlOutput('Hello, world!');

output.addMetaTag('viewport', 'width=device-width, initial-scale=1');

So when you serve up your html in doGet add the meta tag. Check out this link for more information: https://developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String)

Upvotes: 5

Kriggs
Kriggs

Reputation: 3778

Apparently Google can't load Bootstrap from their server, try copying everything to GAS and include in the page as explained in best practices. Also switch back to IFRAME when testing.

Upvotes: 0

Related Questions