Form input field + tabstrip + HTC = broken

[Jolien]

Hi,

I'm using the free trial to get familiar with Kendo and see if I can use it for our PhoneGap app. Now I ran into a problem when I combine a tabstrip with a form input text or password field. I think this problem is device-specific, since we had similar problems when using Sencha on my HTC Desire. 

Problem:
I have a listview with two input fields: a text field (email) and a password field (password), as shown on screen 134912.

When I tap on one of the fields to provide input, I see a white box where I need to type in, but this box is linked to the wrong field. This is shown on screenshot 134930, where you see that next to the e-mail text there seems to be a passwordfield while it is not. When I type in some text, it is shown next to the e-mail field correctly. If I want to type in the passwordfield the white text box comes up next to the email text.

If I tap back and forth on the fields, I get the problem shown in screenshot 134957. 

I don't have this problems when I use the same code without the tabstrip. I think these probems occur because the coordinates of the input field don't take the tabstrip into account.

Specifications:
HTC Desire with Android 2.2.2 and PhoneGap 1.7.0 and Kendo mobile v2012.1.515

[Jolien]

Seems like the dropdown is broken too. If I click on the dropdown when a tabstrip is shown, nothing happens. When I don't use the tabstrip it works fine. 

Am I doing something wrong? I am copying the forms demo.

Kind regards

[Kamen Bundev]

Hi Jolien,

Unfortunately this is an Android bug that is still unsolved even in 4.x (in fact it gets worse). It presents itself when a CSS transformation is applied on one of the input/select element containers. Android native browser developers decided to develop a "feature" which on focus places a native input on top of the real one. This fake input can't be styled and since it is rendered out of the page flow, it stays in place on scroll (our Scroller uses CSS transforms for better performance), resulting in two identical inputs on the page at some point (with the same text inside and even with two blinking cursors). The Android 2.x native browser don't have this "feature" but seems you've reproduced it in PhoneGap. Unfortunately I wasn't able to find a good workaround for now, other than keeping your input forms short to avoid scrolling.

The select element is even worse than the input elements - when you scroll, its touch target remains in its original place and you can activate it with a click where it had been. Fortunately this can be avoided if you use the Kendo UI DropDownList instead, as we provided similar styling when you initialize it in a MobileListView.

Greetings,
Kamen Bundev
the Telerik team

[Kamen Bundev]

Hi Jolien,

I have good news - I've found a way to avoid the input duplication. The next internal build and release will include the fix, but I'm attaching the CSS files (based on SP1) to this post so that you can use them directly. There are some ActionSheet and input styling fixes in there too.

Let me know if the fix works for you.

Greetings,
Kamen Bundev
the Telerik team

[Jolien]

Hi,

I can not try the fix right away since I will be at a conference until friday. I will let you know if it worked as soon as I tried. 

Thank you for your quick response!

[Fanzy]

Hi Kamen

I have exactly the same problem with Jolien, HTC G3, Desire, Samsung Galaxy etc.
I'm using the css v2012.1.601, the form elements are still messed up like Jolien's screenshots.
Should I expect the new update on June 21st

[Kamen Bundev]

Hello Fanzy,

Can you host your application somewhere visible and post a live URL, so that we can reproduce the issue? Thank you in advance.

All the best,
Kamen Bundev
the Telerik team

[merikmgrasp]

Fantastic! This seems to have fixed it. I had a similar issue except without a tab strip - just a basic form with a text input for username and a password input and a button. I kept getting that double textbox problem also even with this simple form or the form would bounce and get jittery.

So its working on my Moto Droid X Android 2.3.4. I'm using PhoneGap in conjunction with Kendo in an android WebView control. Also working on ASUS Transformer Prime with ICS.

Thanks for posting.

[Stefan]

Hi, 
   I had similar problem as Jolien with flying input box on HTC Desire HD (2.3.5) and Samsung Galaxy Tab 8.9 (3.2).
After applying CSS fixes you have recommended, the mentioned issue disappeared,
but another was introduced. Input of characters other than Latin  (cyrillic) is impossible. 

[Kamen Bundev]

Hi guys,

I did some further testing on 2.x, 3.x and 4.x devices and it seems on 2.x the cyrillic issue can't be fixed reliably. The problem is that the visibility on the screen of the fake inputs Android renders is crucial for some features of Android keyboards to work - cyrillic keyboards on Android 2 (and hold-to-type characters on HTC Desire), Swype add-on keyboard on Android 3 (probably on 2 too). I updated the fix to at least the input scroll into view works and cyrillic keyboards on Samsung Galaxy Tab 3.2 work too. Can you check if the attached CSS helps (based on the beta)? Additionally if you want to support cyrillic keyboards on 2.x, you can switch off the fix for these versions like this /only for the CSS I posted/:
.km-android2 .km-list > li
{
    bottom: auto;
    -webkit-transform: none;
}

Kind regards,
Kamen Bundev
the Telerik team

[Fanzy]

Hey Kamen,

Here comes the living demo http://demo.evatic.com/demoews/Index.html 
Many appreciate if Kendo Team can help me out.

Thanks 
 

[Kamen Bundev]

Hi Fanzy,

Since you are forcing iOS look, try with this CSS:
.km-ios .km-list > li
{
    bottom: 10000px;
    -webkit-transform: translatey(10000px);
    -moz-transform: translatey(10000px);
    -o-transform: translatey(10000px);
}

Regards,
Kamen Bundev
the Telerik team

[Fanzy]

It works! That was awesome!
Thanks mate.

[Tom]

I downloaded the CSS files, copy it into my project- mobile app in HTML5,unfortunately nothing was changed,still after tapping on text box it duplicates over while tapping and disappears in the end.
Tried with HTC phone,in Sumsung it works fine.

Any ideas?

[Kamen Bundev]

Hi Tom,

Can you show some code from the page? Also which version of Kendo UI Mobile are you using?

Greetings,
Kamen Bundev
the Telerik team

[Tom]

Hi Kamen,

Basically the code is a simply row that defines text field to full keyboard,Its works with other Samsung phones...

<input type="text"  id="myText" />

I use jQuery Mobile so that page is under one big div: <div data-role="page">, and they all connected to index page.
My CSS files of Kendo are v2012.1.607 version.

[Kamen Bundev]

Hi Tom,

The CSS linked here is targeting only inputs which reside in a Kendo UI Mobile ListView (which implies it is inside Kendo UI Mobile Application). There is a general fix mentioned in the Android bug report, maybe use that instead.

Kind regards,
Kamen Bundev
the Telerik team

[Tom]

Hi Kamen,

Unfortunately I still could not figure out what to do with that thing.. my problem only occurs with text boxes. Is it enough to put those CSS files you added before, and everything should get done automatically?