jQuery Mobile 의 <textarea> 높이 (height) rows 값 적용되게 설정하기

jQuery Mobile에서 <textarea> 태그를  사용해서 rows="2"등을 줬을때, 제대로 높이 (height)가 적용되지 않습니다.

 

rows값의 높이 (height)를 적용하기 위해서는 setTime Javascript로 딜레이를 줘서,

jQuery Mobile에서 가지고 있는 <textarea>의  css 높이값을 수정해준다.

 

rows="2"와 같이 값을 줘서, 높이를 설정해준다.

 

 

HTML 예제

<div data-role="page">
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="textarea-1">5 rows:</label>
            <textarea rows="5" name="textarea-11" id="textarea-1" class="foo"></textarea>
            <label for="textarea-2">10 rows:</label>
            <textarea rows="10" name="textarea-12" id="textarea-2" class="foo"></textarea>
            <label for="textarea-3">15 rows:</label>
            <textarea rows="15" name="textarea-13" id="textarea-3" class="foo"></textarea>
        </div>
    </div>
</div>

Javascritp + jQuery 

setTimeout(function () {
    //$('.foo').addClass('bar');
    $('.foo').css({
        'height': 'auto'
    });
}, 100);

 

Demo 사이트: http://jsfiddle.net/Palestinian/XXEfV/

 

 

출처: https://stackoverflow.com/questions/19117151/jquery-mobile-textarea-how-does-it-use-rows-attribute

JQuery Mobile textarea: how does it use 'rows' attribute?