Question

I have an empty div with a textbox in it and If I write something in the textbox and If I enlarge the div by dragging to its corner the text inside the textbox should increase with the textbox.

As of now I am able to enlarge the textbox to the size of the div but now I need to enlarge the text within it.

Any help will be greatly appreaciated!

This is what I have:
http://jsfiddle.net/gmrcn/2/

Here is my code:

  $(function () {

     $('.demo')

    .draggable()

    .resizable();

    });

This is design code:

<div class="demo">

        <textarea name="TextBox1" rows="2" cols="20" id="TextBox1"></textarea>

    </div>

CSS:

    #TextBox1 {
    width: 100%;
    height: 100%;
}

.demo {
    width: 150px;
    height: 150px;
    padding: 5px;
    background-color: #ff8811;
    position: absolute;
    top: 150px;
    left: 300px;
}

#content
{
    padding-bottom: 3em;
}

Answer 1

You could hook into the resize event of the resizable method, for example:

$(function () {

     $('.demo')
    .draggable()
    .resizable({
        resize: function(event, ui) {
           $('#TextBox1').css('font-size', $(this).height() / 3);
        }
    });
 });