search

intel / appframework

The definitive HTML5 mobile javascript framework
http://app-framework-software.intel.com/
MIT License
2.43k stars 881 forks source link

Resizing of Page after keypad Down #574

Closed NDPS-Dev closed 8 years ago

NDPS-Dev commented 10 years ago

Hi I am developing an application in phone-gap with this appframework for Android. My application has forms consisting of number of input fields & it scrolls properly.. But when I scroll directly to last input field, the keypad opens but on pressing "back" button keypad gets closed but the page doesn't resize & its shows an empty space with the size of keypad.(Ref img1) img1

But if I scroll the page when the keypad is open, the page re sizes properly on "Back" (Ref img2) img2

imaffett commented 10 years ago

device and OS this is happening on?

NDPS-Dev commented 10 years ago

On every android Device which supports html5

imaffett commented 10 years ago

@atomlite - that's not really helpful. You own every device? Because I haven't seen this on my main testing devices (Xperia Play 2.3.5 and GS3).

NDPS-Dev commented 10 years ago

You can check this on Sony Xperia L

imaffett commented 10 years ago

Which OS is it running? Since I do not have that device I try to test a VM matching the OS and then figure out if it's something in Android, or the vendor's custom browser (like Samsung does with Touchwiz)

NDPS-Dev commented 10 years ago

Its OS is 4.1.2 Android JellyBean

NDPS-Dev commented 10 years ago

//Refer this code

<!DOCTYPE html>

``` atom ```
imaffett commented 10 years ago

I tested the kitchen sink with 4.1.1 (Galaxy S3) and an Android VM using 4.1.2. In both cases, the browser was fine when using the hardware keyboard button.

Which version of App Framework are you on? I tested master and 2.1devtf branch

NDPS-Dev commented 10 years ago

I have downloaded the app framework from the below link: https://github.com/01org/appframework Even in the above code I was facing the same problem in Input Fields (Refer UI-->Form Styles Page).

imaffett commented 10 years ago

Thanks - but I'm unable to reproduce it. It may be something with the Xperia device you have. Do you have others you are testing?

Again, I verified against Android ASOP and the Galaxy S3 that the back button works fine.

NDPS-Dev commented 10 years ago

Thanks I also tried on my Samsung S3 Device Please follow the steps to regenerate the Issue: 1) Create an html page with many text input fields(eg 15) 2) scroll directly to last input text field 3) Soft Keypad opens 4) Close the keypad by pressing the back button of Android Device 5) The page shows an empty space and doesn't resize

You can refer to my html code....I have attached in my previous reply

NDPS-Dev commented 10 years ago

@imaffett: Have you tried the above steps? I'm still facing the same issue..

imaffett commented 10 years ago

Yes - I can't replicate it. I added it to my list of bugs to check when I have more time to investigate.

NDPS-Dev commented 10 years ago

@imaffett: Hi

Can you pls provide me the code of html page you tried the steps on? I m stuck on that issue.. FYI I am using Phonegap & building app through command Line Interface for Android.

imaffett commented 10 years ago

Which version of Phonegap?

I'm using Cordova 3.3 (command line) and the kitchen sink app. Go to UI -> Form styles and scroll.

NDPS-Dev commented 10 years ago

Yes I am also using the same Cordova 3.3.0(command line) But the thing is the kitchen sink app UI -> Form styles page does not have the last input as text field. I had previously given the steps that if u happen to scroll directly to the last input field of page, page does not re size after keypad closes (Ref img 1 in 1st comment) pressing back button of device.

Link for code --> http://pastebin.com/BvY18PcG or Have this snippet from img below in your page

code

imaffett commented 10 years ago

I'm flagging this for community. I do not have time to debug your app and can't reproduce this. I added an input as the last element and it worked fine on my devices. It may be an issue with the Z1 and the customization from Sony

asanrivas commented 10 years ago

I encounter this few times. Perhaps i can show something similar. It can be reproduce in desktop browser also. I upload the video at http://www.youtube.com/watch?v=3hNWQSgF1lk

imaffett commented 10 years ago

@asanrivas A video doesn't help. You didn't tell us which browser it was, which device, etc.

asanrivas commented 10 years ago

Tested on both chrome and safari with latest pull appframework. Step to reproduce is inside the video.

imaffett commented 10 years ago

Desktop correct? We do not support desktop browsers. Can you replicate it on a device? If so, provide a demo for it

imaffett commented 10 years ago

And on my macbook pro (OS X 10.9), Chrome and safari work fine.

Please host a demo somewhere that I can debug this on mobile, otherwise it will be closed.

asanrivas commented 10 years ago

Okay, let test this code, I'm going to provide two scenario. I test on Samsung S5 wrapped in cordova 3.5. The html is based on kitchen sink. http://pastebin.com/9eMhLRRr Scenario 1:

  1. Open apps.
  2. Scroll down until last group of form.
  3. Tap on "focus 1", "focus 2" and "focus 3".
  4. Notice that the page will be move upper or down during the taps. screenshot_2014-08-28-01-40-46 copy
  5. The page will become normal if user start to drag.

Scenario 2: 1.Close and re-open app.

  1. Find "Modal Form" button and click.
  2. Fill in some text on textfield below.
  3. Close keyboard.
  4. Close modal (X on topleft)
  5. Result will be same with picture above or the scroll position of panel is not same as before.

thanks for helping to look into this.

imaffett commented 10 years ago

Ok - I don't have access to an S5, so it's gonna take me awhile to test it. I'll let you know when I can hunt one down.