lanpartytools/LANCommander
lanpartytools/LANCommander
1
0
Fork 0
Code Issues Pull requests Projects Releases 17 Packages Activity

Use builtin autosize textarea

Browse source
This commit is contained in:
Pat Hartl 2023-01-08 21:42:13 -06:00
parent 3c30c5066b
commit c805c85b3e
1 changed files with 1 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
LANCommander/Views/Keys/Edit.cshtml
View file

@ -29,7 +29,7 @@
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="mb-3 textarea-grow-wrap">
<textarea asp-for="Keys" class="form-control" oninput="this.parentNode.dataset.replicatedValue = this.value">
<textarea asp-for="Keys" class="form-control" data-bs-toggle="autosize">
@Model.Keys
</textarea>
<span asp-validation-for="Keys" class="text-danger"></span>
@ -52,49 +52,6 @@
</div>
</div>
<style>
.textarea-grow-wrap {
display: grid;
}
.textarea-grow-wrap::after {
content: attr(data-replicated-value) " ";
white-space: pre-wrap;
visibility: hidden;
width: 100%;
padding: .4375rem .75rem;
font-family: var(--tblr-font-sans-serif);
font-size: .875rem;
font-weight: 400;
line-height: 1.4285714286;
color: inherit;
background-color: var(--tblr-bg-forms);
background-clip: padding-box;
border: var(--tblr-border-width) solid var(--tblr-border-color);
}
.textarea-grow-wrap > textarea {
resize: none;
overflow: hidden;
}
.textarea-grow-wrap > textarea,
.textarea-grow-wrap::after {
grid-area: 1 / 1 / 2 / 2;
}
</style>
<script>
let growers = document.querySelectorAll(".textarea-grow-wrap");
growers.forEach((grower) => {
let textarea = grower.querySelector("textarea");
grower.dataset.replicatedValue = textarea.value;
});
</script>
@section Scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}