My website consists of one static page with an HTML and CSS file. Oddly enough, when testing the page and inputting content into a multiline textarea until it overflows, the browser fails to display a scrollbar. Despite inspecting the div with the id 'centered,' which has a height set to 'fit-content' and confirming that it correctly fits the content, the issue persists. Furthermore, attempts to use scrollBy also prove ineffective across various browsers including Chrome on desktop and Android, as well as Firefox on desktop and Android.
Below is the code for index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formr.io</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="index.css">
<script defer>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll(".long-answer").forEach((el) => {
let offset = el.offsetHeight - el.clientHeight;
el.addEventListener('input', function (event) {
event.target.style.height = 'auto';
event.target.style.height = event.target.scrollHeight + offset + 'px';
});
});
});
</script>
</head>
<body>
<div id="centered">
<!-- Header -->
<div class="question-container">
<div class="form-header-color-bar"></div>
<div class="form-header-title">Тест върху "Неразделни"</div>
<div class="form-header-desc">Упражнителен тест върху "Неразделни"</div>
</div>
<br>
<!-- Questions -->
<div class="question-container">
<div class="question-title">Име и клас <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<input placeholder="Вашия отговор." class="short-answer" type="text" />
</div>
</div>
<br>
<div class="question-container">
<div class="question-title">Какво мислите за решението на Иво? Прекалил ли е? <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<input placeholder="Вашия отговор." class="short-answer" type="text" />
</div>
</div>
<br>
<div class="question-container">
<div class="question-title">Теза: "Той ме прегърнал с клони, аз съм в него вейки свряла." <span style="color: red;">*</span></div>
<br>
<div class="text-answer-container">
<textarea placeholder="Вашия отговор." class="long-answer"></textarea>
</div>
</div>
</div>
</body>
</html>
Here's the assigned styling in the index.css file:We appreciate your attention and feedback!