Alpha Video Training
Results 1 to 16 of 16

Thread: keyboard use in mobile apps

  1. #1
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default keyboard use in mobile apps

    I am having issues when the mobile keyboard is brought up in my web app (doesn't matter if I'm using safari and chrome on iOS or using chrome and firefox on android). What happens is if I click in a textbox that is on a portion of the screen that will be covered up by the keyboard, the whole "panel-window" (as in I open a window with the sub-theme panel) scrolls upward and I can only see part of the panel (and see the panel that is behind it) and even sometimes the entire panel is out of view. I can get it back in view if I attempt to scroll on the panel that has the textbox i'm looking to type in but obviously this would be very annoying to the end user. If you see my attached photos I am clicking in the textbox "stop charge" right above my panel footer. The two subsequent photos show the two different scenarios I mentioned. Not sure if all of this is being caused by the panel footer being scrolled up or a setting I haven't come across yet? Or is there some way to use some javascript scroll magic to stop this?
    Photo Oct 11, 11 57 22 PM.pngPhoto Oct 11, 11 57 34 PM.pngPhoto Oct 11, 11 57 40 PM.png

    Thanks for any help!!

    Jmo

    Edit
    Just ran a test using the GardenWeb app on ios and it seems this issue doesn't exist in this application which is just a fullscreen web browser, does this mean there isn't anything that can be done about this issue without putting my mobile web app wrapped in phonegap so it works more like a native application?
    Last edited by lilmofo812; 10-12-2013 at 02:37 AM.

  2. #2
    Banned
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,819

    Default Re: keyboard use in mobile apps

    What happens if you use the "Add to Home Screen" option from Safari? How does the keyboard/app behave then?

  3. #3
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default Re: keyboard use in mobile apps

    I actually have the meta tag which makes doing the "add to homescreen" make my web app act like a native app, with no address bar or tool bar thereby running in full screen mode, and I still get the same results with the keyboard. When in garden web the keyboard coming up is so smooth and all the scrolling in the back is smooth so I'm hoping there is some sort of code I can write to make this happen? Or possibly I need to load my panels in an a5w page?

  4. #4
    Banned
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,819

    Default Re: keyboard use in mobile apps

    If you're using the meta tag... aren't using using it in an a5w page which houses your ux?

    One more thing to try, just to see if there's any difference. For iOS, download Scan, use the Remote feature to generate a QRCode for your UX or a5w, and see how Scan behaves.

  5. #5
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default Re: keyboard use in mobile apps

    The meta tag sits on the login page which is an a5w page but after you login from mobile my app launcher component sends mobile devices to loading just a ux component, so do you think putting that initial component on an a5w page might solve my issue?

    I've used red laser to do this (similar to scan) and it works just like using the gardenview app...? I'm sure it is a browser thing but I was hoping the meta tag would take care of it, also I was hoping there was a way to make it so my panel footer wouldn't slide up when the keyboard is called (thought maybe this was causing the issue). What I mean by this is if you look at the photo that has the submit/reset buttons showing, those are sitting in a panel footer. Do you think stopping the footer from sliding up would do something (and is there a way to do this?). In gardenview the footer scrolls up too so I'm doubting that is the issue but worth a shot.

  6. #6
    Banned
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,819

    Default Re: keyboard use in mobile apps

    I don't know if that would solve it... but I'd certianly give it a try. Put your UX into an a5w page and call that from AppLaucher.

    I would say your panel is "contained"... no way to separate your footer so that the body moves up independently.

    BTW Chrome under Android is changing. The 31 beta declare that they'll no longer support the apple tags. You'll have to add chrome tags now. And they're supporting Add to Homescreen features

  7. #7
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default Re: keyboard use in mobile apps

    Yeah I saw that with the new chrome beta but they are using the same meta tag for full screen mode that apple uses (at least I thought it looked the same). But are you saying I'll need to use new tags for setting up the icons to use on android devices?

    Will give the a5w option a try and see what happens! If it doesn't work I'm not sure what else I can do other than go for the phone gap wrapper? You said you aren't experiencing this issue so I'm curious how you are implementing your transitions from on panel to another? As I said I am opening my ux components in new windows but with a panel sub theme. Also would you mind me heading to your page and just exploring to see if I get the same experiences I'm getting on my site?

    If you'd like to test out mine to see what I am using as transitions head to the following address and use the credentials I've given (all I ask is please don't save anything but rather use the reset button and then the back buttons in the app rather than the back buttons on the browser, also if on iOS you can save to homesreen at the login page and then reopen from there to get the full screen experience.)

    Etrucktools.com

    Jmo@etruckbiz.com
    irocc822

  8. #8
    Banned
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,819

    Default Re: keyboard use in mobile apps

    Right now, Alpha puts this into the a5w page...

    Code:
    <meta name="apple-mobile-web-app-capable" content="yes" />
    From what I read, Chrome won't support this an longer. You'll have to use...

    Code:
    <meta name="mobile-web-app-capable" content="yes">
    Here's a good page for all this. Really not sure if I've got it right.

    https://developers.google.com/chrome...lltohomescreen


    I'm not opening ux components from ux components as windows... so far my panels have been contained in a UX.

    I'll try your process, though, to see how it works.

  9. #9
    Banned
    Real Name
    David Kates
    Join Date
    Apr 2008
    Location
    Unionville, ON
    Posts
    7,819

    Default Re: keyboard use in mobile apps

    The posted images in your first post... how do I get to that part of your system.

  10. #10
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default Re: keyboard use in mobile apps

    Menu button upper left..then trip tracker..then click on any one of the list items and when the action sheet comes up click revenue (should've told you that before..my apologies).

    Also as you stated all of your panels are in one ux component so does this mean you only have one ux component for your mobile site with everything you can do in just their own panel cards (as in you don't open other ux components at all) or do you open ux components in dynamic panels or something similar?

  11. #11
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default Re: keyboard use in mobile apps

    I just did another test across the browsers on iOS and it appears that mobile safari doesn't push up the panel footer when the keyboard comes up and does a decent job of putting the control that has focus in the view-able area above the keyboard (not perfect but 100x better than before).

    When using my shortcut from the homescreen I still have the issue of the panel scrolling out of site (and the panel behind it showing through). This same thing happens when using chrome on iOS.

    Both of the above examples are with my initial component being set on an a5w page rather than just being opened to itself.

    I have also tested having that revenue component open as Modeless-popup instead of modal-popup and still getting the same results.

    Another thing I did just notice is that on chrome for iOS the issue only exists on the first initial click of a control at the bottom of the screen, every subsequent click into one of those boxes causes the component to scroll properly (although the panel footer is still being scrolled up). This same thing seems to happen when using the shortcut from the homescreen (which is using the meta tab we talked about before) but something else peculiar using the site this way is sometimes when I have clicked multiple times into a control that is on the bottom of the screen it becomes impossible to scroll the screen all the way to the top....?

    It seems like as soon as one thing gets fixed something else comes up which is just getting super annoying as I can't deploy an application that has such a quirky user experience depending on what OS and browser the user is utilizing. I'm charging a galaxy s3 to test all of this on the native browser samsung uses and mozilla for android to see what happens, will report back! Thanks for your help with this!

  12. #12
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default Re: keyboard use in mobile apps

    So on the galaxy s3 (which I realize is a very very small sample of possible android performance metrics) but in the native browser when clicking in a control in the bottom of the screen it doesn't scroll the whole panel out of sight and does a decent job of putting the focused control in the viewable window. However the panel footer is still being scrolled up and when the keyboard is dismissed it seems the panel footer is only partially showing at the bottom of the screen (to the point where only the top of the buttons are seen and you cant see the text or images on the buttons). The application is rendered useless in mozilla for android as the top address bar hides my main menu button and therefore I am not able to go anywhere from there. So I think that is all the testing I am able to do and now its just a matter of figuring out if there is a fix or if this is just a dead deal and only fixable using a phonegap solution?

  13. #13
    Member
    Real Name
    Martin Martinez
    Join Date
    Apr 2013
    Posts
    2

    Default Re: keyboard use in mobile apps

    Quote Originally Posted by lilmofo812 View Post
    I am having issues when the mobile keyboard is brought up in my web app (doesn't matter if I'm using safari and chrome on iOS or using chrome and firefox on android). What happens is if I click in a textbox that is on a portion of the screen that will be covered up by the keyboard, the whole "panel-window" (as in I open a window with the sub-theme panel) scrolls upward and I can only see part of the panel (and see the panel that is behind it) and even sometimes the entire panel is out of view. I can get it back in view if I attempt to scroll on the panel that has the textbox i'm looking to type in but obviously this would be very annoying to the end user. If you see my attached photos I am clicking in the textbox "stop charge" right above my panel footer. The two subsequent photos show the two different scenarios I mentioned. Not sure if all of this is being caused by the panel footer being scrolled up or a setting I haven't come across yet? Or is there some way to use some javascript scroll magic to stop this?
    Photo Oct 11, 11 57 22 PM.pngPhoto Oct 11, 11 57 34 PM.pngPhoto Oct 11, 11 57 40 PM.png

    Thanks for any help!!

    Jmo

    Edit
    Just ran a test using the GardenWeb app on ios and it seems this issue doesn't exist in this application which is just a fullscreen web browser, does this mean there isn't anything that can be done about this issue without putting my mobile web app wrapped in phonegap so it works more like a native application?


    I was having that problem too. The solution that i found was to add the UX to a .a5w page and edit some html from the source tab.
    Capture01.jpg
    When I placed the UX in the .a5w page it added the UX in a <p> Paragraph Tag </p>. So the fix was to remove the Paragraph tag and remove the white space in the body of the html.
    This worked for me, I hope this helps.

  14. #14
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default Re: keyboard use in mobile apps

    Quote Originally Posted by Martin_ View Post
    I was having that problem too. The solution that i found was to add the UX to a .a5w page and edit some html from the source tab.
    Capture01.jpg
    When I placed the UX in the .a5w page it added the UX in a <p> Paragraph Tag </p>. So the fix was to remove the Paragraph tag and remove the white space in the body of the html.
    This worked for me, I hope this helps.
    I'm curious, does this mean that every other component you load off this main one is also in its own a5w page? For instance your fist component may contain some welcome information and a menu that takes you to other components, are these in a5w pages? Or are you opening subsequent components in dynamic panels? I'm utilizing opening components in new windows that are sub-themed like panels so just trying to get your specific use case so I can decide what is the best way to implement it! Thanks for the suggestion!!

  15. #15
    Member
    Real Name
    Martin Martinez
    Join Date
    Apr 2013
    Posts
    2

    Default Re: keyboard use in mobile apps

    Quote Originally Posted by lilmofo812 View Post
    I'm curious, does this mean that every other component you load off this main one is also in its own a5w page? For instance your fist component may contain some welcome information and a menu that takes you to other components, are these in a5w pages? Or are you opening subsequent components in dynamic panels? I'm utilizing opening components in new windows that are sub-themed like panels so just trying to get your specific use case so I can decide what is the best way to implement it! Thanks for the suggestion!!
    It is a single a5w page with a component that has dynamic panels.

  16. #16
    Member
    Real Name
    Jmo
    Join Date
    May 2013
    Posts
    367

    Default Re: keyboard use in mobile apps

    If possible could I take your web app for a run (from a test account possible)? I want to see the flow of things with the panel cards as the reason I was opening the next component in its own window themed as a panel was because if I didn't I would have a double set of back buttons (because each component had its own uniquely programmed back button in the panel header). I'm curious if you did something to get around this design flaw? I appreciate your help! I tried doing as you said but I think because the subsequent windows are being opened that putting that initial one in a a5w didn't make a difference :/

Similar Threads

  1. Launching Mobile Apps
    By TPeterson in forum Mobile & Browser Applications
    Replies: 29
    Last Post: 09-19-2017, 03:17 PM
  2. International Keyboard for the alpha v12 mobile application
    By Ferenju in forum Mobile & Browser Applications
    Replies: 3
    Last Post: 11-08-2013, 12:46 PM
  3. Mobile Browser Soft Keyboard Tip
    By Terry in forum Mobile & Browser Applications
    Replies: 2
    Last Post: 07-27-2013, 10:07 PM
  4. An Area for Mobile Apps?
    By chipsm in forum General Questions
    Replies: 0
    Last Post: 06-09-2011, 01:51 PM
  5. AlphaFive - mobile apps
    By jkwrpc in forum Alpha Five Version 9 - Desktop Applications
    Replies: 2
    Last Post: 10-10-2009, 11:10 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •