This is a migrated thread and some comments may be shown as answers.

Jquery Mobile: Issue with fixed header & panel on Android with/Build and Deploy

16 Answers 198 Views
jQuery Mobile
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Nick
Top achievements
Rank 2
Nick asked on 31 Jul 2013, 05:40 PM
Problem: Page has a header with a data-position = fixed.   There is a data-role = panel on the page.    Works fine in simulator.   Deploy to Android via 'Build and Deploy' (HTC Evo LTE, Android 4.1).    When panel is revealed, it is _under_ the header panel.

This problem does not occur in chrome under android via normal browsing - I deployed the build to a web server and browsed it.  

I do not know if this is an issue if the application is actually deployed - I do not know if the 'compile' via Build and Deploy is different from when it is published to the play store.

I am including a screen cap of the code and in the text at the bottom that will reproduce the error.  I build this from a starter Icenium project and added only the panel, a few attributes and the click event to show it.

<div id="pnlPanel" data-role="panel" data-position="right" data-display="reveal">
                <h1>I'm a Panel</h1>
            </div>
            <div data-role="header" data-position="fixed">
                <h1>Hello, World!</h1>
                <a href="index.html" data-role="button" data-inline="true" onclick='$( "#pnlPanel" ).panel( "open" );'>Menu</a>
            </div>
            <div data-role="content">
                <h1>Welcome to Icenium!</h1>
                <p>

I am posting this here as it does not appear to be a JQuery mobile problem.

Thanks,
Nick

16 Answers, 1 is accepted

Sort by
0
Steve
Telerik team
answered on 05 Aug 2013, 12:47 PM
Hello Nick,

We've made tests on several Android 4.x devices with your sample FixedHeaderPanelBug app but were not able to reproduce the problem locally. Please try deploying to another device to see if this isn't a local problem. In general Chrome and the Android WebView used in Cordova are not the same thing, so it is not correct to compare both.

By default your app is in Debug mode, which includes Icenium specific bits required for livesync. When you use Publish, all Icenium specific bits are removed.

Regards,
Steve
Telerik

Do you enjoy Icenium? Vote for it as your favorite new product here (use short code H048S).
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Nash
Top achievements
Rank 1
answered on 08 Sep 2013, 02:32 AM
Hi Nick, I have been facing same issue but not able to find any solution. Have you got any resolution yet? if Yes, please share it or email me on meetjasper@gmail.com
0
Nick
Top achievements
Rank 2
answered on 08 Sep 2013, 02:59 AM
Nash,
We've suspended our work with phone gap due to performance issues with it.     IMHO, it simply doesn't meet the expectations people have from 'real' apps.    We have resigned ourselves to producing native apps.

Past that, sorry, no, we never came up with a solution.     We are basically using the same app we worked with  cenium as mobile web app but pared down - we're not currently using the slide in menus.

Sorry I couldn't be of more help.   The fact I was able to duplicate it with their starter app was a deal breaker for me.  I have no explanation for why they are unable to duplicate it.    

Honestly, the entire mobile web app thing is such a hack job - the browser diffs are almost worse than the desktop when you start dealing with all the IOS & Android browsers..   None of them implement the HTML 5 audio spec properly.   The click delay stuff is simply insane - took me hours to solve that issue and it's still not 100%.  The swipe still doesn't work properly on android.  It just feels 'wrong'.

Anyway, sorry for the rant.

Regards,
Nick
0
Steve
Telerik team
answered on 09 Sep 2013, 08:48 AM
Hello Nash,

Please share which is the email address you use to login to Icenium and the project name, so we can look into the problem. If you prefer you can push a sample that exhibits the problem in github, so we can clone it from there directly.

Regards,
Steve
Telerik

Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Nash
Top achievements
Rank 1
answered on 10 Sep 2013, 01:29 AM
Thanks a lot Nick for immediate response. Its bad to see that things are not working as expected in the mobile app. There are few more issues that I have been facing other than this panel thing. It seems like jQuery Mobile isnt a good choice to develop a mobile application as its not consistent. I have tried another thing which is working for me now - Instead of "push" effect, I used overlay and it works properly. I still have fixed header issue. Header doesn't stay back fixed, sometimes it moves upside while scrolling or sometimes it vanishes :D. Anyways thanks for your time.

0
Daniel
Top achievements
Rank 1
answered on 01 Nov 2013, 12:32 AM
I have the exact same problem!. Did you guys find a solution?
0
Steve
Telerik team
answered on 01 Nov 2013, 03:54 PM
Hello Daniel,

Please provide the information we inquired in our previous post, so that we can pinpoint the problem.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Daniel
Top achievements
Rank 1
answered on 02 Nov 2013, 08:39 PM
dquijadaus@gmail.com, Mallowstreet
0
Steve
Telerik team
answered on 07 Nov 2013, 07:55 AM
Hi Daniel,

We can't login as your service require authentication. Please provide us with demo user and pass and share where does the problem occur.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Daniel
Top achievements
Rank 1
answered on 08 Nov 2013, 03:45 AM
ohh yeah, sorry for that.
username: martin_alderson@example.com
password: Changeme123
0
Steve
Telerik team
answered on 12 Nov 2013, 01:28 PM
Hi Daniel,

Thank you for the credentials. I tried on 3 Android devices: Nexus S (Android 2.3.6), HTC One X with (4.0.3) and Nexus 4 (4.3) and could not reproduce the problem on any of them. I've attached a screenshot from the Nexus 4. If you can reproduce this on any Android device then please provide us with exact steps how to do this.
In any way, this does not sound like a problem/bug in Icenium or Cordova, so we recommend posting this problem to community sites such as stackoveflow, where other experienced Android user can advise you.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.
0
Nick
Top achievements
Rank 2
answered on 19 Feb 2014, 01:57 PM
Came back with the latest version of my mobile web app running under latest jquery & jquery mobile.   Uploaded and got it running in Icenium.    I'm enclosing two screen shots.  One is from chrome, which looks correct - and we've been running with for some time now without this issue.  The other is from the AppBuilder wrapper.  

I do not see how this could possibly be a JQuery Mobile issue when it works 100% under other mobile web browsers.
0
Kaloyan
Telerik team
answered on 24 Feb 2014, 09:39 AM
Hi Nick,

Thank you for bringing back the the issue.

Unfortunately, we are not able to reproduce such behavior on our side.

Is it possible to send us a sample project, reproducing the matter? This will help us a lot, in order to check where the issue comes from.

Further, I found a similar issue with jQuery, reported here. You can give it a look and check if the solution from the discussion helps.

Thank you for the cooperation and the help in advance.

Regards,
Kaloyan
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
Nick
Top achievements
Rank 2
answered on 25 Feb 2014, 01:18 AM
It appears to be an issue with 'reveal'.   If I switch to 'overlay' it works.  

There are multiple people having the issue and it only happens once it's deployed via AppBuilder - that simply doesn't point to Jquery Mobile as the problem.   I can take the exact code (and I have it running right now in production) on a web server viewing it in Chrome or Safari on multiple phones and it doesn't happen.

BTW, I also wrote an android wrapper that invokes the web site in a webview.    Another coder wrote an iOS wrapper.   Works perfectly in both - we have this also running in production.   See UtiliFit on the android play store or UtiliFit in the App Store.   I literally took this code, copied it into app builder, deployed it and started getting the problem.

I fully understand if you can't duplicate the problem, you can't track it.  

Regards,
Nick
0
Kaloyan
Telerik team
answered on 27 Feb 2014, 04:36 PM
Hello again Nick,

Thank you for the information provided.

We are trying to reproduce the behavior on our side. Unfortunately, we will require some additional time in order to do this. We will contact you again as soon as we have more clues about the issue.

I hope this works for you. Thank you for the understanding in advance.

Regards,
Kaloyan
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
0
Zdravko
Telerik team
answered on 28 Feb 2014, 04:30 PM
Hi Nicholas,

We were able to reproduce your issue and the culprit seems to be the data-position="fixed" option of the jquery header which causes the misbehavior you described under Android WebView.
As a solution I would suggest removing this option from your header.

Furthermore, contacting jquery developers and reporting this issue could prevent other users from struggling with it.
Thank you for your assistance and patience.

Regards,
Zdravko
Telerik
Icenium is now Telerik AppBuilder, and is part of the Telerik Platform. For more information on the new name, and to learn more about the Platform, register for the free online keynote and webinar on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT)
Tags
jQuery Mobile
Asked by
Nick
Top achievements
Rank 2
Answers by
Steve
Telerik team
Nash
Top achievements
Rank 1
Nick
Top achievements
Rank 2
Daniel
Top achievements
Rank 1
Kaloyan
Telerik team
Zdravko
Telerik team
Share this question
or