JQuery Mobile textarea：「行」属性はどのように使用されますか？

Question

さまざまな行数のJQuery Mobileで、テキストエリアを動的に生成したいと考えています。私はこのためにノックアウトを使用しようとしていましたが、rows属性にデータバインドしました。

など。ここに：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textareaを、さらにjQueryのモバイル独自のドキュメントに含まれています：http://view.jquerymobile.com/1.3.1/dist/demos/widgets/textinputs/index.html#Textarea

<label for="textarea-1">5 rows:</label> 
<textarea rows="5" name="textarea-1" id="textarea-1"></textarea> 

<label for="textarea-2">10 rows:</label> 
<textarea rows="10" name="textarea-2" id="textarea-2"></textarea> 

http://jsfiddle.net/j7b9A/2/はしかし、jQueryのモバイルは、十分に文書化されてrows属性を無視しているようです。

ここでのコメントは、高さと幅を設定すると、rowsの属性がhttps://stackoverflow.com/a/7194692/1061602に優先していることを示しています。これは、JQuery Mobileがテキストエリアが拡大したときに遷移しているためです。行属性は常に完全にオーバーライドされていますか？

How to make text area to be height of 10 rows fixed?のような別の質問がありますが、通常はrows属性を使用できるため、すべてのテキストエリアの高さを修正する必要はありません。

私が気付いていないことは、私自身のコードでは、私のテキストエリアの1つに不正なstyle="height: 184px;"が追加されています。もう1つは、この回答で強調表示されているように、50pxの標準スタイルを使用しています：jQuery Mobile and textarea rows - これは何か他のことが起こっているように見えますが、これを簡単なフィドルで再現することはできません。

私はJQuery Mobileのソースを簡単に見てきましたが、rowsの属性はまったく使用されていません。

バインドされたJQueryモバイルテキストエリアの範囲で行の高さの範囲を指定するにはどうすればよいでしょうか？

Answer 1

jQMは、応答性およびスタイリング目的のために異なるクラスを追加することによって向上させる。 rowsの高さを維持する最も簡単で簡単な方法は、jQMクラスをオーバーライドすることです。

Demo

CSSソリューション：

.custom_class { 
    height: auto !important; /* !important is used to force override. */ 
} 

JSソリューション - テキストエリアの後に設定し、高さが強化されています。

あなたが必要とするすべてがある

setTimeout(function() { 
    $('textarea').css({ 
    'height': 'auto' 
    }); 
}, 0); 

Answer 2

テキスト領域の内容は、行が多くなると自動的にスクロールします。あなたが望むように最大高さ。 追加CSS

textarea.size{max-height:30px;} 

<textarea name="textarea-1" id="textarea-1" style="max-height:30px;"> 

Answer 3

jQueryのモバイルは、あなたがそれを必要とするまで、スペースを取ることはないだろうな設計によってので、応答するように意図されます。入力エリアまたはコード経由でテキストエリアにデータを追加すると、必要に応じてテキストエリアが拡大することがわかります。

1. あなたはJSFiddle例で行ったように、JQMの役割をオフにすることですオマールが言及したメソッドを使用します：それは空のときにそのサイズを上書きしたい場合は

   は、次の2つのオプションがあります。

2. もう1つは、デフォルトクラスのas seen in this answerを上書きすることです。

Answer 4

...この

textarea.ui-input-text { height: inherit !important} 

Answer 5

を追加し、私は同じ問題を抱えていたと私は最終的に解決策を見つけました。 textarea要素で 'data-autogrow = "false"'を設定することができます。その後、cssで行の属性や高さを設定することができます。このようなdata-autogrow="false"
：それは1.4.0+

Answer 6

あなたがこれを使用することができ、モバイルのjQueryで作品を行い <textarea rows="10" name="textarea-2" id="textarea-2" data-autogrow="false"></textarea>