Solution 1 :

use : position: relative

checkout the doc here :

fiddle :

Solution 2 :

The problem was small. All I needed to do was change position: relative to position: absolute. It was a minor detail that I did not notice before posting my question.

Thank you, everyone!

Solution 3 :

Add vertical-align: top in XPContain class

Problem :

Problem Statement

Whenever I resize the textarea in my Angular website, all the elements move down, which is something I do not want.

A Technical Caveat

I want the user to be able to resize the textarea by themselves. It is something that must be a part of the functionality of the website.


HTML for the Textarea

<mat-form-field class="XPContain" appearance="outline">
    <textarea matInput cols="30" rows="10" placeholder="Describe your past experience"></textarea>

CSS for the Textarea

.XPContain {
  position: relative;
  left: 400px;

Images of the Problem

When the textarea is not resized by the user:

enter image description here

When the textarea is resized by the user:

enter image description here

Explanation of Images

As you can see, whenever the user resizes the textarea, it moves all the other elements down.

Expected Results

I want the textarea to resize independently from all the other elements and not move any elements.

Actual Results

The textarea moves all the elements down whenever resized.


Comment posted by

Can you please provide a working example? It does not seem to be the default behavior for mat-form-field to act like this:

Comment posted by BilluBaziger

Please provide a working demo to understand the problem

Comment posted by Compiler v2

Ah-ha, I actually found the problem. I am going to answer my own question. It was something small of course!