読者です 読者をやめる 読者になる 読者になる

Sencha Touch: labelWrapをセットするとスクロールできない場合の対処方法

Sencha logo

フォームのフィールドに labelWrap: true をセットしたところ、フォームをスクロールしても元に戻ってしまい、下のフィールドに入力できないという事象が発生しました。

調べてみると、Androidのみで発生し、iPhoneChrome (Mac)では発生しませんでした。

Androidは4.1.1と4.2.2で確認。)

なので、実装方法の問題というよりも、Sencha TouchやCordovaのAndroid実装の問題か、Androidの標準ブラウザの問題ではないかと予想しています。

対処方法(暫定)

しばらく悩んだのですが、とりえあず、空のラベルを追加することで解決できることがわかりました。

フォームの入力フィールドの最後に以下のようなラベルを追加します。

xtype: 'label'
html: ' '  # 全角スペース
height: '1px'

(CoffeeScript)

htmlの値は半角スペース( )以外の通常の文字でも問題ないようですが、文字が表示されないよう、文字色を背景色に一緒にする必要があります。

思いっきり対症療法的な方法ですが、ひとまずこれでスクロールできるようになりました。

もっと良い方法があれば教えてください。

環境

Sencha Touch 2.3.1
Cordova 3.4.1
Android 4.1.1, 4.2.2