I have maximize button in pop window, and i have a text area and want to re-size it based on maximizing the window. below are the code for opening the pop up window

var url = "mypopup.do" + params;
var modalprops = "height=310px,width=400px,scrollbars=yes,status=no,menubar=no,resizable=yes";
window.open(url, 'winName', modalprops, false);

I have maximize button in pop window, and i have a text area and want to re-size it based on maximizing the window. below are the code for opening the pop up window

var url = "mypopup.do" + params;
var modalprops = "height=310px,width=400px,scrollbars=yes,status=no,menubar=no,resizable=yes";
window.open(url, 'winName', modalprops, false);

• javascript

• 1 The code for opening the window is probably not relevant. Look into the window.onresize event. – Boaz Commented Apr 2, 2013 at 22:07

3 Answers 3

Give it a percentage relative width as such:

<textarea style="width:100%"></textarea>

This should resize it without javascript when the browser is resized.

EDIT: Both Width and Height are edited if you set them on your textarea's css:

<div style="width:40%;height:40%">
    <textarea style="width:100%; height:100%;"></textarea>
</div>

This would resize the textarea accordingly, inside the div and the underlying popup window.

jsBin: http://jsbin./odukur/1/

If you need to fine tune beyond Hanlet Escaño's method (which is great) and you're allowed to use jQuery, I would remend using the resize() function following the general method outlined here to get the size of the window and adjusting the height and width of your textarea accordingly.

Do you mean it ?

<div>
    <textarea id='debug'></textarea>
    <button>Resize</button>
    <textarea id='test'>some words</textarea>
</div>

Jquery

 $("button").click(function () {
    var viewportWidth = $(window).width() - 50; // -50 only want to show beacutiful >3
    var viewportHeight = $(window).height() - 90;
    $('#test').height(viewportHeight);
    $('#test').width(viewportWidth);
    $('#debug').text(viewportWidth + ':' + viewportHeight);
});

Change the 'Result' window, and click the button, you will find the textarea has been resized.

The code is simple, I think it may inspire you.

Thanks Moch Daear's tips.