Form In ListView Issues

[Jay]

I'm using Kendo UI, PhoneGap 3, and iOS 7.  I have a Form within a ListView (following example code). I noticed the following behavior/issues:

1.  When an input field is focused (and using emulated scrolling), the cursor doesn't move along with the input field.
2. When a field is focused (but now using native scrolling), the cursor does move along BUT overlay the header. The scrollbars are slightly different looking but work fine and don't overlay the header
3. When you touch a form field (or possibly some other area) and attempt to scroll the listview, sometimes the whole application scrolls and bounces
4.  When you touch a form field at the lower portion of the form, the virtual keyboard obscures the form field instead of pushing it up and keeping it within view
5. Continuing from #4, when you go to another view, the virtual keyboard is not dismissed. This is not a problem if the form field is in focus.

I'm wondering if I'm doing something wrong or if these are indeed issues. If the latter, I would like to know if there are workaround and/or when fixes will be release.

 I've attached the .html file for reference.

Thanks!

[Kiril Nikolov]

Hi Jay,

Since Q3 2013, we introduced the native scrolling option that usually helps in setups like yours. I would suggest you to take a look at the following article, explaining how it works and how to implement it in your project:

http://docs.kendoui.com/getting-started/mobile/native-scrolling

Regards,
Kiril Nikolov
Telerik

[Jay]

Thanks, Kiril. I followed your recommendation and observed differences between view data-use-native-scrolling="true" and app useNativeScrolling: true. So I suppose they're not the same?

Using app useNativeScrolling: true resolved most of the issues. I noticed that the scrolling hints overlay the header and footer (which is mentioned in the doc). However, I also noticed that the header scrolls off the screen when the virtual keyboard is used to tab through the form fields. Is this expected behavior? Is there a workaround?

[Kiril Nikolov]

Hello Jay,

This is a bug in the iOS7, unfortunately at the moment we have not managed to find a suitable workaround for this behavior.
Regards,
Kiril Nikolov
Telerik

[Jay]

Hi Kiril,

I downloaded and updated to the Q3 release and now the ListView has lost its kinetic scrolling. Is this intended behavior? Is there a way to enable for app where useNativeScrolling: true? Thanks.

[Alexander Valchev]

Hello Jay,

The behavior is not intended to occur. We were able to reproduce it in a sample page and can confirm that this is a bug. We will log it for further investigation. As a small sign of our apprechiation for bringing this to our attention I updated your Telerik points.

Regards,
Alexander Valchev
Telerik

[Jay]

Thank you, Alex. I look forward to the fix/update. 

[Tony]

I've also noticed issues with forms in listViews on the Android 4.0.3 native browser. One only needs to view the form overview page in the examples directory included in the KendoUI Mobile commercial distribution (/examples/mobile/forms/index.html). I'm using the latest internal build (2013.3.1127). Viewing the page using the Android 4.0.3 native browser:

• When touching on a form element on the lower half of the page, the virtual keyboard covers the form element. This is not remedied by using {useNativeScrolling: true}. In fact, activating native scrolling seems to make scrolling very "jerky" and not smooth at all. 
• None of the HTML5 form elements (which is the purpose of that form demo page) such as slider, number input, date input, and time input function at all.

Are these bugs? As I said, these issues can be seen in your own example code so it can't be something I'm doing wrong.

thanks,
Tony

 

[Tony]

Just to clarify on my last post -- when I say that the slider, date, time, and number inputs function "at all", that is actually only true of the slider (which is completely absent), the other form fields do function, but just behave as regular text input fields.

-Tony

[Kiril Nikolov]

Hi Tony,

Thank you very much for detailed information provided.

The date and time inputs do not work on Android 4.0.3, because they are not implemented inside the native browser - only some of the Samsung phones support it, but this is because of a implementation that they did for their phones. The slider is a widget part of the web suit and you are deploying it using Kendo UI Mobile, so maybe this is the reason why it is not working?

As for the native scrolling and keyboard overlay- these are issues buried deep inside Android 4.0.3 and non-existent in the latest versions. In general this version of Android does not perform as expected and ships with a lot of problems, that are hard to override and repair. Please note that this is an issue with a high priority that we are currently working on and if we manage to resolve it, a fix will be published.

I would like to thank you in advance for your patience and understanding.

Regards,
Kiril Nikolov
Telerik

[Tony]

I understand now that the demo took advantage of new HTML5 form elements which are only available in certain browsers. It would've been nice of KendoUI Mobile took these incompatibilities into account and provided polyfills as fallbacks to modern-but-non-compliant browsers (like Android). Shouldn't that be one of the main objectives of a mobile framework? In any case, it was disappointing because the client I had required coverage in Android browser so I had to convert it over to jQuery Mobile.

[Kiril Nikolov]

Hello Tony,

We do offer Date and Time picker controls, that can be used in a mobile application as well.:

DatePicker

DateTimePicker

yes they are part of the Web suite, but you can include them in your project and use them on old browsers.

Regards,
Kiril Nikolov
Telerik