David Hope

David Hope

@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?

David Hope

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:

could someone please advice on this?

Am i missing something?

This works on iOS and Browsers.

Thanks in advance.

David Hope

@Fran-Diox Yeah, i found those before and in fact I tried them (both Javascript solution & the Plugin) but I still don’t get the desired effect!

When I use the Javascript solution that is mentioned in stackoverflow, the webview is jumpy when the input is focused and the plugin causes the webview to stop shrinking…

Basically the desire effect is this:

The ons-toolbar stays in its position which is right at the top of the page and then everything bellow the ons-toolbar (i.e. the page content etc) to shrink as normal.

This is how any other app that i’ve seen do it.

David Hope

@munsterlander said:

Have you tried updating Onsen? It is on version 2.6.1 which is a long way from the rc you are using.

No, i haven’t tried updating the onsen. so do you think that this issue only exists in the older versions?

David Hope

Hello,

I’ve been searching for a while for a solution to this problem and even though others had the same issue but no one actually provided a working solution to this issue!

Basically, the **ons-toolbar **gets pushed to the top and disappears when the keyboard is showing on iOS.

I don’t have this issue on Android. its only the iOS that causes this issue.

I tried the followings and nothing worked so far:

<ons-toolbar style="position:sticky !important;">

and

<ons-toolbar style="position:fixed !important;">

i’m using onsenui - v2.0.0-rc.15

Could someone please be kind enough to advice on this issue ?

a working solution would be appreciated or is this even possible with onsenui at all?

Thanks in advance.

David Hope

@Fran-Diox I create a click function for the class name.

example:

$('.className).on...

@4dnan Yeah, using the class name… i thought about using your suggestion lastnight but I totally forgot about it lol… Clever idea that is…

David Hope

@misterjunio I just figured it out.

When I use inline onclick events to navigate to another page using pushPage, everyhting works fine but when I use a global click event that error pops up again.

That is very strange.

Any particular reason for it?

David Hope

Hi,

I’m constantly getting this error:

uncaught exception: pushPage is already running.

I have been trying to figure this out and find the source of it for over 5 hours and I can’t and I’m pulling my hair out!

I’m simply using this code to change pages:

document.querySelector('#myNavigator').pushPage('individual.html',{animation:'slide'});

Could someone please advice on this issue?

David Hope

@4dnan No problem.

I have no idea why to be honest but I spent hours and finally figured that out.

I suspect its because the DOM doesn’t get removed completely when you change pages! Because when I inspect the elements in the console, I see the old DOM elements in there (greyed out)!

which means the same ID is in the page a multiple times thus javascript/jquery cannot select the element(s) with an ID so the Class names works.

There is another thing that I could suggest is to use

document.addEventListener("init", function(event){


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

///YOUR CODE HERE////

}

});

and if that doesn’t work, you can use


document.addEventListener("show", function(event){


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

///Your code here///

}

});

As @Fran-Diox rightly said it, its all about the timing issue.

David Hope

@David Hope

Posts made by David Hope