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

Thread is closed for posting
17 posts, 0 answers
  1. Nick
    Nick avatar
    139 posts
    Member since:
    Mar 2006

    Posted 31 Jul 2013 Link to this post

    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
  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 05 Aug 2013 Link to this post

    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.
  3. Nash
    Nash avatar
    2 posts
    Member since:
    Sep 2013

    Posted 07 Sep 2013 Link to this post

    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
  4. Nick
    Nick avatar
    139 posts
    Member since:
    Mar 2006

    Posted 07 Sep 2013 Link to this post

    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
  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 09 Sep 2013 Link to this post

    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.
  6. Nash
    Nash avatar
    2 posts
    Member since:
    Sep 2013

    Posted 09 Sep 2013 Link to this post

    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.

  7. Daniel
    Daniel avatar
    3 posts
    Member since:
    Aug 2013

    Posted 31 Oct 2013 Link to this post

    I have the exact same problem!. Did you guys find a solution?
  8. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 01 Nov 2013 Link to this post

    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.
  9. Daniel
    Daniel avatar
    3 posts
    Member since:
    Aug 2013

    Posted 02 Nov 2013 Link to this post

    dquijadaus@gmail.com, Mallowstreet
  10. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 07 Nov 2013 Link to this post

    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.
  11. Daniel
    Daniel avatar
    3 posts
    Member since:
    Aug 2013

    Posted 07 Nov 2013 Link to this post

    ohh yeah, sorry for that.
    username: martin_alderson@example.com
    password: Changeme123
  12. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 12 Nov 2013 Link to this post

    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.
  13. Nick
    Nick avatar
    139 posts
    Member since:
    Mar 2006

    Posted 19 Feb 2014 Link to this post

    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.
  14. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 24 Feb 2014 Link to this post

    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)
  15. Nick
    Nick avatar
    139 posts
    Member since:
    Mar 2006

    Posted 24 Feb 2014 in reply to Kaloyan Link to this post

    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
  16. Kaloyan
    Admin
    Kaloyan avatar
    872 posts

    Posted 27 Feb 2014 Link to this post

    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)
  17. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 28 Feb 2014 Link to this post

    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)
Back to Top