Flex Mobile textInput in scroller text lag

Question

I have been seeing a weird lag in the text that is input into a textInput container in my flex mobile app. The issue occurs when I type in some text into a textInput then scroll in any direction. The entire screen and all objects seem to move, except for the text in the textInput.

This becomes a really big issue when I select the textInput to begin typing and the softkeyboard appears and shifts the input which then places the cursor and the typed text somewhere else on the screen. It looks pretty bad.

Is this a general performance issue? Any suggestions on how to fix?

code is basic:

 <s:Scroller x="0" y="0" width="100%" height="100%" verticalScrollPolicy="on" >
      <s:Group> 
         <s:TextArea softKeyboardType="number" id="ti1" y="145" width="390" height="75"                      fontSize="36" fontWeight="bold" horizontalCenter="0" text=" "/>
      </s:Group>
    </s:Scroller>

score 5 · Accepted Answer · answered Feb 21 '12 at 16:38

I found the answer to this myself after a couple hours of googling. In the textinput statement, you need to add skinClass="spark.skins.mobile.TextInputSkin"

If would look like this.

<s:Scroller x="0" y="0" width="100%" height="100%" verticalScrollPolicy="on" >
    <s:Group>   
    <s:TextInput skinClass="spark.skins.mobile.TextInputSkin"/>     
    </s:Group>
    </s:Scroller>

This will prevent the text from "flying" out of the textinput boxes when you actually run the app. I did see some mention that the softkeyboard will not work when you do this, but I didnt seem to have an issue with that so perhaps that has been addressed. Hope this is as useful to others as it was to me.

Thanks. This solution works well. I had some issue on my style: I use the TextInput without a border in a form, and then the label of the formItem doesn't align with the bottom of my text. So I had to set the paddingBottom to -10 which resulted in bottom halve of text cut off. So instead of setting paddingBottom to -10, I set it to -5 instead, and paddingTop to 10. This solved my issue. Reason for this is that the mobile skin calculates the measuredHeight as measuredHeight = paddingTop + textHeight + paddingBottom. — Christo Smal, Jun 21 '13 at 09:11

score 3 · Answer 2 · answered Apr 10 '12 at 17:10

3

To cover all TextInputs, use CSS.

s|TextInput
{
skinClass: ClassReference("spark.skins.mobile.TextInputSkin");
}

answered Apr 10 '12 at 17:10

Ron Rebennack

2,666
1
22
17

Both answers are correct, although this is the one I used in a global CSS. – BajaBob Apr 17 '12 at 13:31

score 3 · Answer 3 · answered Sep 10 '12 at 08:55

Now softKeyboardType="{SoftKeyboardType.NUMBER}" doesn't work anymore.

Any ideas?

For mobile applications, you must use StageTextInputSkin and StageTextAreaSkin:

<s:TextInput restrict="0-9" maxChars="3"
             skinClass="spark.skins.mobile.StageTextInputSkin"
             softKeyboardType="{SoftKeyboardType.NUMBER}"/>

<s:TextArea restrict="0-9" maxChars="3"
            skinClass="spark.skins.mobile.StageTextAreaSkin"/>

score 0 · Answer 4 · answered Jan 21 '15 at 09:43

0

This issues was fixed in Apache Flex SDK version 4.12.0

Refer this link Apache FLEX JIRA

If you are using older SDK then checkout this component ExtendedStageTextInput

Hope this might help some one....

answered Jan 21 '15 at 09:43

Gowtham S

923
14
39

Flex Mobile textInput in scroller text lag

4 Answers4

Linked