Bootstrap form text is not responsive on mobiles in Google Apps Script htmlservice

Question

I have developed webapp using Google Apps Script HTMLService and Bootstrap CDN. The design works well in desktops and laptops. I have designed 3 column form.

It gets automatically converted into single column in mobile devices which is expected. But text & logos looks very small and it doesn't look like bootstrap optimized. Please check this link on laptop and mobile: https://script.google.com/macros/s/AKfycbyVBzSQxrsKXDlAVPdIUHWl1g406ucRfKghfzFY7FVKvL8ji9bS/exec

`

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index');
  return template.evaluate()
      .setTitle('Responive Form')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

`

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   
   <!-- Optional theme -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
   
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 </head>
 <body>   

<div class="container">
            <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">First Name</label>
                          <input class="form-control" type="text"id="firstName" >
				</div>
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">Last Name</label>
                          <input class="form-control" type="text" id='lastName'>
                 </div>
                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                      <label id="labels" class="control-label">Email</label>
                          <input class="form-control" type="text">
                 </div>                   
            </div>

</div>
  </body>
</html>

It's pretty much impossible to tell without some code. Check if you have declared the right col width. You should use col-xs-12 to make the form as wide as the screen, even on the smallest devices. — mfaorlkzus
I have added my code... could you please check? I have tried almost all different classes but still text looks very small in mobile phone. — Kiran Jadhav
I don't think your sample exhibit the behavior you are experiencing with your app. Also, the js link is not working. I had to replace it with <link src="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></link> to make it work. Sorry, but I can't reproduce the trouble. — jmag

Karl_S Karl_S · Accepted Answer · 2017-09-29T13:50:15

I had to make an addition to my doGet to add .addMetaTag('viewport', 'width=device-width, initial-scale=1') to evaluate():

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index');
  return template.evaluate()
      .setTitle('Responive Form')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

Bootstrap form text is not responsive on mobiles in Google Apps Script htmlservice

2 Answers