CODEWITHSUNDEEP
androidwebviewionic-framework
notanormie
notanormie

Reputation: 455

Android webview bad rendering

I'm creating a application with ionic framework and wrapping it into android app (webview), everything seems to work fine except that when I put it on my device rendering is broken.

Example

Source:

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/jquery.js"></script>

<ion-pane>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>



    </ion-header-bar>
    <ion-content>
        <tour-form>
            <form id="submit">
                <div class="list">
                    <label class="item item-input">
                        <input type="text" placeholder="TID" name="tc">
                    </label>
                    <label class="item item-input">
                        <input type="text" placeholder="Code" name="code">
                    </label>
                    <button class="button button-light">
                        Submit
                    </button>
                </div>
            </form>
        </tour-form>
        <content id="content"></content>
    </ion-content>
</ion-pane>

Anybody knows a solution to this problem?

Upvotes: 1

Views: 1395

Answers (1)

Bartosz Wawrzyniak
Bartosz Wawrzyniak

Reputation: 36

Please follow this issue: https://github.com/driftyco/ionic/issues/1880

It has something to do with the interpretation of the .scroll-content: margin-top: -1px; on some devices, which is part of the ionic.css file.

Try to set this in your style.css: .scroll-content {padding-top:1px;}

This solution works on my device (Samsung Galaxy S2, Android 4.2.2)

Upvotes: 1

Related Questions