Textarea height/width in jQuery UI dialog

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>

Solution

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 */
}

Comments

[kralco626]

no i had not tried it, but i just did now that you mentioned it and it did not work. All that did was put another 50px of blank space above the textarea. However the textarea still expanded itself over the whole area of the dialog. (I had to use the scroll bar on the dialog to see the 50px of margin space if that makes sence)

[Mario Fraiß]

Unfortunately the link, mentioned in UPDATE 2 is dead :(

[kapa]

@MarioFraiß I hope it's just temporarily down, but I could find the content here. Also copied the code from the site into my answer.