ansaurus

Question

Make a TextArea fill up the rest of the page vertically?

Answer 1

A:

uh.... height: 100%?

Pekka 2009-11-28 22:42:04

This isn't working. If there are elements above it then the textarea causes the page to need to scroll in order to show all of the textarea.

Evan Fosmark 2009-11-28 22:44:01

afaik one has to set `body`/`html`'s height to 100% as well.

Philippe Gerber 2009-11-28 22:44:34

Can you give us a little more information on the situation - what elements are where, whether they have fixed heights etc.

Pekka 2009-11-28 23:06:21

Normal textboxes and labels are above it.

Evan Fosmark 2009-11-28 23:10:42

Answer 2

+3 A:

I think it is important to understand that setting height:100% for a textarea will only work in IE if you explicitly set it to quirks mode...works as expected in Firefox. The W3C states that the size of a textarea is defined in rows rather than pixels etc.

An easy way to ensure that the size of the textarea ALWAYS takes up the entire body height, taking into account the godzillions of user installed toolbars etc, varying monitor resolutions and possibly even resized windows is shown below. The key is the simple JS method, and it's placement. The form is just there to simulate your "Normal textboxes and labels"

   <html>
            <head runat="server"><title>Look, Mom!  No Scrollbars!</title></head>
             <body onload=" resizeTextArea()" onresize=" resizeTextArea()"> 
                <form id="form1" runat="server">
                    <div id="fromWrapper" style="height:200px">
                        <input type="text" value="test" />
                        <input type="text" value="test" />
                    </div>
                    <textarea id="area" style="width: 100%"></textarea>
                </form>

             <script type="text/javascript">
                 function resizeTextArea() {
                     //Wrap your form contents in a div and get it's offset height
                     var heightOfForm = document.getElementById('fromWrapper').offsetHeight;
                     //Get Height of body (accounting for user installed toolbars)
                     var heightOfBody = document.body.clientHeight;
                     var buffer = 35; //Accounts for misc padding etc
                     //Set the height of the Text Area Dynamically
                     document.getElementById('area').style.height = 
                     (heightOfBody - heightOfForm) - buffer;
                     //NOTE: For extra pinnache' add onresize="resizeTextArea()" to the body
                 }
            </script>
            </body>
 </html>

Copy & Paste it into a new page...it works in both FF and IE.

Hope this helps!

PortageMonkey 2009-11-29 01:12:39

ansaurus

tags:

views:

answers:

Make a TextArea fill up the rest of the page vertically?

related questions