How To Resize Textbox And Get Dimensions Inside Div Element Using Jquery

I have a div element which can be draggable and I have a textbox inside that div element and when I drag the div element automatically the textbox size should increase along with t

Solution 1:

A textarea should be specified in terms of rows and columns, according to the specs, but you can still style them with CSS:

#TextBox1
{
    width: 100%; height: 100%; /* make the element resize */
}
.demo
{
    width: 150px;
    height: 150px;
    padding: 5px10px20px4px; /* updated padding to make things look better */background-color: #ff8811;
    position: absolute;
    top: 150px;
    left: 300px;
}

See here. Tested in Firefox, Chrome.

Also, if you need to get the X and Y coordinates, draggable has a stop method which you can bind to:

$('.demo')
    .draggable({ stop: function(event, ui) {
        //get the textarea element and it's coordinatesvar txt = $(this).find('textarea:first');
        var x = txt.offset().left;
        var y = txt.offset().top;
        alert('(' + x + ', ' + y +')');
    } })
    .resizable();

Solution 2:

Is that what you want?

http://jsfiddle.net/gmrcn/

Edit:http://jsfiddle.net/gmrcn/2/

#TextBox1 {
    width: 100%;
    height: 100%; /* edit: fixed @ comment */
}