It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 27 February 2021
When an unknown number of lines is needed in a textarea, utilization from an auto-growing or auto -expanding textarea is essential. As visitors write and go to new lines, the textarea size increases and new lines are added to it. The following code example shows how to make such textareas with variable height.
<!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
.input-sizer {
display: inline-grid;
vertical-align: top;
align-items: center;
position: relative;
border-bottom: solid 1px #ced4da;
}
.input-sizer.stacked {
width: 100%;
align-items: stretch;
}
.input-sizer.stacked::after,
.input-sizer.stacked input,
.input-sizer.stacked textarea {
grid-area: 2/1;
}
.input-sizer > span {
padding: 0.25em;
font-size: 1rem;
}
.input-sizer::after,
.input-sizer input,
.input-sizer textarea {
width: auto;
min-width: 1em;
grid-area: 1/2;
font: inherit;
padding: 0.25em;
margin: 0;
resize: none;
background: none;
appearance: none;
border: none;
}
.input-sizer::after {
content: attr(data-value) " ";
visibility: hidden;
white-space: pre-wrap;
}
.input-sizer:focus-within {
outline: none;
border-bottom: solid 1px blue;
}
.input-sizer:focus-within > span {
color: blue;
}
.input-sizer:focus-within textarea:focus,
.input-sizer:focus-within input:focus {
outline: none;
}
</style>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js'></script>
<form action="">
<div class="form-group col-sm-12">
<label for="" class="input-sizer stacked">
<span>Your Message </span>
<textarea oninput="this.parentNode.dataset.value = this.value" rows="1" placeholder=""></textarea>
</label>
</div>
</form>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!