absolute positioned text area does not respect right and bottom properties

Question

I am trying to absolute position a text area that will stretch to cover it's parent. Unfortunately Chrome seems to ignore right property and Firefox ignores both right and bottom properties.

Here is the CSS I am using :

#container {
  position: relative;
}
#my-text-area {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 10px;
  right: 10px;
}

Here is a JsFiddle example :enter link description here

Is there a textarea default property that i have to disable or are these just bugs? There are workarounds to achieve the full width and height of the parent by inheriting these properties from the parent but i am looking for a way to make the absolute positioning for the scenario you would in the future have custom right and bottom not only 0.

Just use top and left, then set height and width to 100%? – Justin Heath Jan 09 '16 at 13:53 — Justin Heath, Jan 09 '16 at 13:53

score 5 · Accepted Answer · edited Jul 16 '21 at 12:26

Wrap the textarea in an element and use same css on that element. Demo: https://jsfiddle.net/lotusgodkk/csub6b96/2/

HTML:

<div id="container">
    <div id="my-text-area">

        <textarea></textarea>
    </div>

</div>

CSS:

body,
html,
#container {
    width: 100%;
    height: 100%;
}

body {
    margin: 0px;
}

#container {
    position: relative;
}

#my-text-area {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

textarea {
    height: 100%;
    width: 100%;
}

Reference: http://snook.ca/archives/html_and_css/absolute-position-textarea

If you're interested in why this is required, it's because the browsers affected are those which render textarea as a replaced element. Rendering this control is delegated to the OS, and not handled by the browser itself, and it appears that certain CSS properties aren't respected when rendering a replaced element with position: absolute. The relevant (and complicated) section of the CSS spec is https://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width

This is a great workaround....i am still curious if there is a way to enable proper behavior on the textarea itself. — coanda mihai, Jan 09 '16 at 14:14
@coandamihai I guess there is no way yet. The link which I shared describes about this behavior — K K, Jan 11 '16 at 05:38

score 0 · Answer 2 · answered Jan 09 '16 at 13:52

0

To achieve dynamic height and width from parent, you can use inherit keyword in width, height property in child.

Here is working fiddle to play.

body,
html,
#container {
  width: 100px;
  height: 100px;
}

body {
  margin: 0px;
}

#container {
  position: relative;
}

#my-text-area {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: inherit;
  height: inherit;
}

<div id="container">
  <textarea id="my-text-area"></textarea>
</div>

answered Jan 09 '16 at 13:52

Noopur Dabhi

1,867
25
38

this works ...but if i would like in the future to modify the right or bottom properties to leave space for another element i would not be able to. – coanda mihai Jan 09 '16 at 14:16
I don't get your point, where do you want to add another element? – Noopur Dabhi Jan 09 '16 at 14:20
For example yo have a 20px stripe element on the right of the textarea...if this positioning worked i would just have to modify the **right: 20px;** property and it would leave a space for the stripe but still resize accordingly to it's parent element. – coanda mihai Jan 09 '16 at 14:27

absolute positioned text area does not respect right and bottom properties

2 Answers2

Linked