Is there a way for the input text container to remain in its original position within the layout even after submitting text? Usually, when the data displayed container's height increases, it pushes the input text container down.
Despite trying absolute positioning, everything works fine until I submit the text. After that, I am unable to use the text area or submit button without reloading the page. Could this be caused by the contents of the input container shifting?
Although I attempted using position absolute, it rendered the input unusable after a single submit. Removing it caused the input container to move to the bottom. I also tried using transform: translate(-50%, -50%) and moving all children of the input container, but to no avail.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce1fce0">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="container position-relative">
<div class="row">
<!-- First container -->
<div class="col-12 col-md-3 order-1 order-md-0">
<div class="card text-center">
<h2>Car Park Number</h2>
</div>
</div>
<!-- 2nd container with position-absolute -->
<div class="col-12 col-md-3 input-container order-2 position-absolute mb-5">
<div class="card">
<div class="card-body">
<h5 class="card-title">Enter Car Park Number Prefix:</h5>
<textarea class="form-control" id="carParkNumberInput" rows="3" placeholder="Enter prefix (e.g. TY)" oninput="validateInputForPrefix(this)"></textarea>
<button class="btn btn-primary ripple mt-3" id="submitPrefixBtn">Submit</button>
</div>
</div>
</div>
<!-- 3rd container -->
<div class="col-12 col-md-9 order-0 order-md-1">
<div class="card custom-height-card">
<div class="card-body">
<div id="yourContainerId" class="row"></div>
</div>
</div>
</div>
</div>
</div>