3. onsen ui 2.6.1 has no styling on Android 4.2.2?

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

onsen ui 2.6.1 has no styling on Android 4.2.2?

  • D

    I’ve just migrated from the old onsen ui to the 2.6.1.

    Everything works fine in browsers (tested in FF and Chrome) and iOS.

    However, in Android device (phonegap app) it doesn’t have any styling at all! in fact, nothing works properly and I don’t understand why.

    This is exactly what I have in my project:

    https://codepen.io/anon/pen/yzGBzG?&editors=101

    and this is my entire code:

    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="format-detection" content="telephone=no">
 
<!--<meta http-equiv="Content-Security-Policy" content="default-src gap://ready file://* *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">-->
  
  
  <title>Onsen UI</title>

  <!-- JS dependencies -->
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.css">

<script src="https://unpkg.com/onsenui/js/onsenui.js"></script>
  
  
  <script src="js/jquery.min.js"></script>
 
  
  <script src="cordova.js"></script>


<script>
document.addEventListener("show", function(event){

if(event.target.id ==='Tab2') {

alert();

}

});

</script>

<style>

</style>

</head>
<body>

<!-- App layout -->

<ons-page>
  <ons-toolbar>
    <div class="center">Tab 1</div>
  </ons-toolbar>

  <ons-tabbar swipeable position="auto">
    <ons-tab page="tab1.html" label="Tab 1" icon="ion-home, material:md-home" badge="7" active>
    </ons-tab>
    <ons-tab page="tab2.html" label="Tab 2" icon="md-settings" active-icon="md-face">
    </ons-tab>
  </ons-tabbar>
</ons-page>

<template id="tab1.html">
  <ons-page id="Tab1">
    <p style="text-align: center;">
      This is the first page.
    </p>
  </ons-page>
</template>

<template id="tab2.html">
  <ons-page id="Tab2">
    <p style="text-align: center;">
      This is the second page.
    </p>
  </ons-page>
</template>


<script>
ons.disableAutoStyling();
</script>
</body>
</html>

    This is a screenshot of how it looks on my Android device:

    0_1508255543755_Screenshot_2017-10-17-16-41-54.png

    could someone please advice on this?

    Am i missing something?

    This works on iOS and Browsers.

    Thanks in advance.

    0 1 Reply
  • Onsen UI

    @David-Hope said:

    Am i missing something?

    Yep, this. To begin with, <template> elements do not exist on Android 4.2.2. You can try with the old <ons-template> but there could still be things that don’t work.

    0
  • D

    @Fran-Diox said:

    ons-template

    Even ons-template doesn’t work! still looks the same on Android device!

    why the older android is not supported anymore?

    what version of Android is supported now?

    0 1 Reply
  • Onsen UI

    @David-Hope

    what version of Android is supported now?

    The one mentioned in the guide link I posted. You can use Crosswalk plugin if you want to support older versions of Android. The reason is that the old Android web view does not implement many features that Onsen UI relies on. From simple Promise to Set/Map, for example.

    0