1

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);
Pankaj
  • 3,512
  • 16
  • 49
  • 83
  • 1
    The code for opening the window is probably not relevant. Look into the `window.onresize` event. – Boaz Apr 02 '13 at 22:07

3 Answers3

7

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/

Hanlet Escaño
  • 17,114
  • 8
  • 52
  • 75
  • This would only resize it vertically. It's likely the OP means in both dimensions in `based on maximizing the window`. – Boaz Apr 02 '13 at 22:08
  • 1
    Thanks Hanlet for your response. I could resize the text area width by using above but how can i adjust the height ? If i use height=100%, i get a very thin text area :( – Pankaj Apr 02 '13 at 22:35
  • @Pankaj, what is the size of the textarea's parent? Textarea will inherit the height from its parent. – Hanlet Escaño Apr 02 '13 at 22:38
  • 2
    The jsBin you linked shows a text area that is exactly two rows high. how do i make it however many rows as needed to fit the window??? – Michael Oct 06 '16 at 20:59
4

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.

Community
  • 1
  • 1
Arth Du
  • 807
  • 4
  • 6
1

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.

Alex Xu
  • 196
  • 2
  • 10