I'm currently working on a project in ASP.NET that involves a resizable textbox with a character limit display positioned below and to the right of the box. The challenge I am facing is ensuring this text remains properly aligned as the size of the textbox changes based on different browser window sizes and monitor resolutions.
Despite my attempts to align the text to the right, I have not been able to achieve the desired result. How can I ensure that the character limit text always appears below and to the right of the resizable textbox, even when the box is being resized?
Bootstrap is utilized for div alignment in this particular project.
--- UPDATE ---
Below are some code examples along with the scripts typically used:
// EXAMPLE 1
<div class="col-md-3 mb-3 ml-2">
@Html.EditorFor(m=> m.Title, new { htmlAttributes = new { @class = "form-control characterlimit", @maxlength = 128 } })
<div class="text-muted col-md-11 mb-3 ml-4 position-absolute" style="font-size: 12px; text-align:right">128 Character Limit</div>
</div>
// EXAMPLE 2
<div class="col-md-6 mb-3 ml-2">
@Html.TextAreaFor(m => m.Description, new { @class = "form-control characterlimit", @rows = 3, @maxlength = 2500 })
<div class="text-muted col-md-3 mb-3 ml-0 position-absolute" style="font-size: 12px; text-align:right">2500 Character Limit</div>
</div>
<script>
$(".characterlimit").keyup(function () {
var box = $(this);
var max = box.attr("maxlength")
var len = box.val().length;
box.next().text((max - len) + " Characters Left");
});
</script>