-1

Is there a solid way to let a textarea fill the available space in a div?

  • The #outer div has a fixed height.
  • The #header div has dynamic content.
  • The #body div contains a textarea and should fill remaining space in #outer div.

reference render

This is the solution I have got so far: http://jsbin.com/UqelOYi/9/watch?html,css,output

It's a working for solution Chrome and Safari, but it does not render well for Firefox and more important Internet Explorer. I am looking to support IE8+.

Most preferable would be a solution that does not involve any JavaScript.

Note that the Gmail compose popup has similar behavior, where the recipients header can grow in size while the message body textarea shrinks.

j08691
  • 204,283
  • 31
  • 260
  • 272
mlangenberg
  • 1,087
  • 11
  • 21
  • Worth noting that the Gmail UI is utterly Javascript-dependent; don't let anything you see there lead you to assume a CSS-only solution. – Paul Roub Dec 20 '13 at 20:13

2 Answers2

1

with Javascript the solution is simple (with JQuery even simpler)

jQuery: $('textarea').css({height:(300-$('#header').height())+'px'});

native JS: 

document.getElementsByTagName('textarea')[0].style.height = (300-document.getElementById('header').style.height)+'px'

Why do you not want to use JavaScript?

EDIT: I was playing around with your JSBin and noticed if you add

height:100%;

to the #body style, it fixes it for Firefox. Verify? Any other browsers you see it failing in after that fix?

isick
  • 1,467
  • 1
  • 12
  • 23
  • This isn't pure Javascript ... you may want to note this is Jquery – DaniP Dec 20 '13 at 20:13
  • Good point. This is JQuery. I'll add a JS only solution – isick Dec 20 '13 at 20:16
  • Using JavaScript for layout generally makes things more complicated. For every modification of #header's content, a function needs to be triggered that also calculates the height of the textarea again. If there are several places that modify #header, things get messy quickly. – mlangenberg Dec 21 '13 at 14:06
  • Understandable. This problem was bothering me so I was playing around with your JSBin today and noticed if you add height:100%; to the #body style it seems to work in Firefox. Thoughts? – isick Dec 23 '13 at 03:18
1

Your display:table, table-row approach is a good thinking.

You only have to fix your table-row proportions. No need for browser jamming javascript nor kitty sacrificial plugins.

Change this :

#header {
  background-color: #FFDDAA;
  display: table-row;
  height: 1%; /* this was 0, make it 1% */
}

Only tested at a flash with firefox. I am not on a dev computer. If anyone can confirm it's working for other browsers. Well it has to be: it's a table with 2 rows, first one take lesser height, the other row takes the rest.

[post edit]

This has been confirmed to work in firefox, but not IE10 IE8. Perhaps you'd need to set the other table-row like cell to 99%:height, then position your text-area to top:0; bottom:0; or something like.

See for yourself

Milche Patern
  • 19,632
  • 6
  • 35
  • 52
  • Confirmed it works for Firefox, Chrome and Safari. [In Internet Explorer 10](https://dl.dropboxusercontent.com/u/13142301/jsbin_textarea_ie10.png), the textarea does not get the right height. Looks like the #body div does have the right height though. Maybe that is useable to layout the inner textarea. – mlangenberg Dec 24 '13 at 11:47
  • Funny, it does work in IE9, but not in IE8. Maybe we do need some JS, but only to set: `setInterval(function() { textarea.style.height = body.style.height }, 100)`; I would still prefer a No-JS solution though. – mlangenberg Dec 24 '13 at 11:54
  • Thanks to you all, sadly i won't be much able to push research before january 07 ( vacation ) but your comments helped out. – Milche Patern Dec 25 '13 at 01:44
  • I find it odd that the textarea has different behavior than a regular div. We could detect misbehavior: `if ($('#body').height() !== $('textarea').height()) { setInterval(funcToCopyHeight, INTERVAL) }`, but what value for `INTERVAL` could be set so the user does not notice, but at the same time is not a resource hog. – mlangenberg Dec 25 '13 at 09:52
  • Another workaround could be to set `height`, `max-height`, `overflow-y: auto;` of #header to sane defaults combined with a fixed `height` for `textarea`. But only `if ($('#body').height() !== $('textarea').height()) { $('#outer').addClass('fixed-height') }`. This would be a pragmatic approach though. – mlangenberg Dec 25 '13 at 09:56
  • Oh and since filling the available height does work well for divs with `display: table-row` in all browsers, we could also set `overflow-y: auto; border: 1px;` on that div. Then set `border: 0` on the textarea, so nobody sees the actual height. However this would require `jquery.autosize.js`, to let the textarea itself grow in height automatically. On the plus side, it only needs to hook into `textarea.onchange`, on the downside, we are bringing a lot of baggage only for IE{8,10}. – mlangenberg Dec 25 '13 at 10:05