Search code examples
htmlgoogle-apps-scriptmobileweb-applications

A Google Apps Script mobile web app with configured HTML viewport is not displayed correctly

I would like to build a web app with Google Apps Script that is mainly used in its mobile version, so with a smaller screen. I'm using Bootstrap 5 for the layouting/grid system. The components should span the width of the mobile device screen, so col-12 in Bootstraps grid system.

My simple Google Apps Script file to return the HTML is this:

function doGet(e) {
    return HtmlService
        .createHtmlOutputFromFile('my-form')
        .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

So, I'm using addMetaTag to configure the viewport as suggested here: Apps Script Web App elements are too small when viewed on a phone

This is the HTML file (my-form.html) for my web app:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Med-Form</title>
</head>
<body>

    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2" style="background-color: lightgrey;">
                <header>A header</header>
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-12 col-lg-8 offset-lg-2">

                <form>
                    <div class="mb-3">
                        <label for="exampleInputEmail1" class="form-label">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                    </div>
                    <div class="mb-3">
                        <label for="exampleInputPassword1" class="form-label">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>

            </div>
        </div>
    </div>

</body>
</html>

This is a rather simple web form (actually the form is just an example code from Bootstraps docs).

The HTML file itself looks like this (correctly) with the Chome dev tools and a smaller screen device:

enter image description here

But, deployed as a Google Apps Script web app, again with the Chrome dev tools, the layout is not the same:

enter image description here

Google inserts a warning banner at the top of the web app. If I manually delete that row (it sits within a row of a table) as seen in the screenshot below, the layout matches the HTML file with its mobile layout (the first screenshot above).

enter image description here

So, it seems that the warning banner is the reason the mobile version of the web app is not displayed correctly. But to my knowledge, there is now way to hide that warning banner.

What must I do, so my web app is displayed correctly on smaller screen devices?

Thanks a lot for your help!

Solution

  • Update: Issue was marked FIXED.

    This is a known issue. As mentioned by DuuEyn, It was reported here:

    https://issuetracker.google.com/issues/298287665

    You can add a +1 to the bug report for a chance to increase it's priority.