Search code examples
csshtmljquery-ui-resizable

Resize Textarea based on parent Div

I have code as below div is draggable and Resizable using JQuery.I want the inner textare to be resized automatically based on resized div.With code below it works fine for width but it does not acquire full height of div . 

 <div class="dragDiv" id="dragDiv">   <textarea  style="width:100%;height:100%;background-color:Transparent;font-family:Arial;font-size:11pt;border: 1px;color: white;" id="Text" name="Text"></textarea>
        <br/><input type="submit" value="Mark" onclick="MarkImage()" />
    </div>
Solution

  • Everything below the jQuery resizable div needs to have height set to -something- in CSS (or absolute positioning with top and bottom both set). e.g.:

    <div class="Resizable">
    <div style="height:100%">
        <div style="height:100%">
            <textarea></textarea>
        </div>
     </div>
 </div>

    quick demo: http://jsfiddle.net/cwolves/KkNRb/