2

I need to display three sets of information in an aside tag, and I have a textarea that I want to expand if information is too long. Every time I expand the first textarea though the text and textarea underneath it follow it as well. I am trying to get the textarea to go over the text and textarea underneath it. I tried its position as relative but that didn't work. Here is the example of the code:

https://jsfiddle.net/07em8L7s/

    <aside id="info">
        <div class="font">
        <div class="header">Aside</u></div>
        <b>Header 1:</b><br> 
        <textarea disabled style="background-color: white; max-height:160px; max-width:295px; position: relative;" cols="35" rows="3">info</textarea><br>   
        <b>Header 2:</b><br> 
        info<br>
        <b>Header 3:</b><br>
        <textarea disabled style="background-color: white; max-height:160px; max-width:295px;" cols="35" rows="3">info</textarea><br>
        </div>
    </aside>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Mikhail Vega
  • 21
  • 1
  • 4

2 Answers2

1

position: relative doesn't remove an element from the normal flow of the document. In other words, the relatively positioned element still impacts other elements in the layout.

You need to use position: absolute. This removes the element from the normal flow and other elements won't even recognize its existence.

You may notice that adjacent elements suddenly disappear when you absolutely position the textarea. That's because other elements take up the space an absolutely positioned element was occupying before it was removed from the flow. The adjacent elements are behind the textarea.

You need to use the left, right, top and bottom properties to move positioned elements.

But bottom line, when you absolutely position your textarea it won't affect the surrounding elements when you expand the box.

Demo: https://jsfiddle.net/07em8L7s/3/

Two more notes:

  • You may need to use the z-index property to determine the stacking order of positioned elements.
  • Absolutely positioned elements are positioned relative to the nearest positioned ancestor. If there is no positioned ancestor then the body element is used.
Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
0

In case you are still looking for another answer, please do check my fiddle here: https://jsfiddle.net/07em8L7s/4/

My solution is to wrap the textarea in a div with relative position and assigned the textarea inside with absolute position. 

.textarea-wrapper { position: relative; max-height: 72px; }
.textarea-wrapper textarea {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  min-height: 60px;
  max-height: 160px;
  padding: 5px;
  border: 1px solid #ddd;
}

You will see the wrapper will have a max height value so the wrapper won't overflow when you resize the textarea's height. Hope it helps!

sandalkoyak
  • 265
  • 2
  • 10