I created a small JavaScript script to ensure that a text area adjusts responsively based on the size of the accompanying image. It generally works well, but there is a strange random bug that I can't quite figure out. This is how the page should be displayed:
https://i.sstatic.net/k2RrP.jpg
About 70% of the time, the text area loads with the correct height. However, occasionally, it displays like this:
https://i.sstatic.net/lhYth.png
If I refresh the page, it immediately adjusts to the correct height. Here is the code I am using:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0859e839e80">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h1 class="display-3 text-center">Welcome to</h1>
<h1 class="display-6 text-center">This page is currently under construction</h1>
<div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 my-3">
<div id="targetcard" class="card">
<img id="pic_uc" class="nav-item rounded" src="https://placehold.co/600x400"
alt=""></img>
<div class="card-img-overlay">
<a target="_blank" href="http://www.freepik.com"></a>
</div>
<div class="card-body">
<p class="card-text fs-6 fw-light lh-1">Designed by BiZkettE1 / Freepik</p>
</div>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 my-3">
<div id="textContentAre" class="card border-0 overflow-y-scroll">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis iusto dolorum aspernatur
itaque sunt placeat veniam velit eius! Itaque molestias laborum repellat dicta doloribus? Unde atque
perferendis eaque architecto. Tempora sapiente accusantium iste libero qui fugiat consectetur laudantium
placeat ab explicabo inventore sunt modi facere a dolor, vitae at ratione! Explicabo nulla quasi
provident facilis repellendus esse deleniti tenetur eaque ratione perferendis sunt rerum amet
accusantium hic
temporibus quidem, laborum nemo blanditiis doloremque! Fugit eligendi atque illo. Molestiae modi ex
magnam id quaerat perferendis laboriosam illo repellat, in reiciendis! Rem voluptate quae fugit
doloremque
molestias unde ab necessitatibus perspiciatis, ipsa autem, voluptas commodi esse ex. Incidunt libero
dolores consequuntur distinctio sequi impedit voluptatibus, eum inventore, deserunt facere quidem error,
minima
sunt labore enim? Recusandae labore dignissimos libero ab asperiores maiores tenetur magnam, rerum
itaque
voluptate ipsa dolorum voluptatem officia in alias omnis! Animi incidunt, ipsa molestias a ut ducimus
consequuntur libero dicta expedita voluptatem fuga nam veniam facere ad pariatur voluptate autem sunt
reiciendis reprehenderit maiores. Nostrum, architecto. Veniam id facere suscipit aliquid vitae
consequuntur eum aspernatur quam magnam libero illo voluptate corporis iste pariatur consequatur, totam
eligendi
eveniet adipisci obcaecati qui architecto incidunt molestias mollitia fugiat. Laborum quod, sunt
perspiciatis
minima totam architecto quibusdam! Eligendi dignissimos eos ut? Maxime distinctio repellat non magnam
cupiditate beatae corrupti laboriosam deserunt quisquam ullam quam assumenda itaque dolores debitis
facere
exercitationem, officiis explicabo doloribus nobis. Error quibusdam ut suscipit in a. Nisi ad doloremque
ipsum sit tempore perferendis reiciendis accusamus tenetur facilis cupiditate molestias est autem ea
vero nostrum ipsa magnam, iste ipsam deserunt rem fugit. Quidem magnam recusandae doloribus dignissimos
ad
modi inventore sint labore saepe! Tenetur, neque hic ducimus quaerat odit maiores officiis nostrum
aliquid,
architecto ut perspiciatis qui adipisci quas. Ab, laudantium ratione. Cupiditate consequatur iure.
</div>
</div>
</div>
<div class="row">
<div class="col my-3 text-center">
<p class="text-muted">
Contact <a href="#" class="text-reset">Contact</a>.
</p>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let height = document.querySelector("#targetcard").clientHeight;
document.querySelector('#textContentAre').style.height = height + "px";
window.addEventListener("resize", function () {
//console.log('View Port: ' + window.innerWidth)
if (height != document.querySelector("#targetcard").clientHeight) {
height = document.querySelector("#targetcard").clientHeight;
document.querySelector('#textContentAre').style.height = height + "px";
}
});
return false;
})
</script>
</div>If anyone could help me understand why the text area occasionally loads with the wrong height, I would greatly appreciate it.