How to resize the text area in query mobile?

问题

Can you please tell me how to resize the text area? Actually the problem is that I open the pop up screen on button click. In my pop up screen I have one text area (having small area).

<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>

I write many characters on that text area and than close it. Again I open this and it has the same area that was before closing(large area)? How to resize that text area so that it starts with same starting size.

My code:

<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
    <div data-role="header" data-theme="b"> <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
         <h1>Case Information</h1>
         <a href="#" data-role="button" data-corners="false" id="AddButton">Add</a>
    </div>
    <div data-role="content">
        <div>
            <img src="img/Documents.png" />
        </div>
        <div data-role="fieldcontain">
            <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
            <input name="text-12" id="text-12" value="" type="text" class="caseName_h" autocorrect="off">
        </div>
        <div data-role="fieldcontain">
            <label for="caseDate" style="text-align:left;margin-left: 0px;">Case Date:</label>
            <input name="caseDate" id="caseDate" value="" type="date" class="caseDate_h">
            <!--input name="mydate2" id="mydate2" type="date" data-role="datebox" class="caseDate_h" data-options='{"mode": "calbox","useNewStyle":true,"zindex":1200}'/-->
        </div>
        <div data-role="fieldcontain">
            <label for="textarea-12">Case Notes :</label>
            <textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
        </div>
    </div>
</div>

回答1:

Working example: http://jsfiddle.net/Gajotres/7JqRG/3/

Just use this CSS:

#text-12 {
    width: 100% !important;
    height: 50px !important;
    max-height: 50px !important;
}

It will lock textarea height. !important must be used to override default values.

回答2:

$('#text-12').css('width','whatyouwant');

$('#text-12').attr('cols','whatyouwant'); //for the width
$('#text-12').attr('rows','whatyouwant'); //for the height

来源：https://stackoverflow.com/questions/17741096/how-to-resize-the-text-area-in-query-mobile

标签

jquery-mobile