Question

I have a jQuery dialog that pops up and allows the user to send a confirmation email. I have some text, and then a text area. The dialog is expandable and I want the text area to fill up the entire area of the dialog, EXCEPT the 50px or so of height I need at the top to display the text.

Setting the textarea height to 100% correctly allows the textarea to expand/contract with the change in size of the dialog. However, it does not give space at the top for the text.

How do i get the textarea to fill the entire area of the dialog (height and width) EXCEPT the first 50px of height in which my text will reside.

Thanks.

HTML:

<div id="dialog-message-email" title="Send Email">

    <p style="height:50px">
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Confirmation Email to be sent to user.
    </p>
    <div>
    <textarea id="ConfirmEmailText" class="ui-corner-all ui-widget-content" style="height:100%;padding:5px; font-family:Sans-serif; font-size:1.2em;"></textarea>
    </div>

    </div>

Answer 1

You can use absolute positioning.

UPDATE: The textarea won’t stretch to its parent when given absolute positioning, so instead I styled the div that is around your textarea, and the textarea will only adjust itself to the div’s dimension.

See working example here. I played with bottom and right to adjust for the textarea’s border and padding, not the nicest one, might be tweaked, but it works.

So the basic stuff that makes it work is something like this:

#dialog-message-email {
    position: relative;
    min-height: 200px; /* the child is absolute, so we need a minimum height */
}

#dialog-message-email div { /* this one will stretch */
      position: absolute;
      top: 50px;
      bottom: 0;
      left: 0;
      right: 0;
}

#ConfirmEmailText { /* and the textarea follows its parent's dimensions */
      width: 100%;
      height: 100%;
}

UPDATE 2: I just stumbled upon a great article that is related, and extends this by masquerading the wrapper as the textarea itself:

div {
  position: absolute;
  left: 5px; 
  top: 5px;
  right: 5px; 
  bottom: 5px;
  border: 1px solid #CCC; /* style like textarea */
}

textarea {
  width: 100%;
  height: 100%;
  margin: 0; /* don't want to add to container size */
  border: 0; /* don't want to add to container size */
}