CODEWITHSUNDEEP
javascript
Pankaj
Pankaj

Reputation: 3664

re-size text area based on window size

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);

Upvotes: 1

Views: 15272

Answers (3)

Alex Xu
Alex Xu

Reputation: 316

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.

Upvotes: 2

Hanlet Esca&#241;o
Hanlet Esca&#241;o

Reputation: 17380

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.com/odukur/1/

Upvotes: 7

Arth Du
Arth Du

Reputation: 807

If you need to fine tune beyond Hanlet Escaño's method (which is great) and you're allowed to use jQuery, I would recommend 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.

Upvotes: 4

Related Questions