Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Automatic sizing of HTML.TextAreaFor based on content

Posted on 2016-11-09
1
Medium Priority
?
72 Views
Last Modified: 2016-11-11
I have an MVC 5 project with Bootstrap, and a form that relies upon the model for its field content. There are many fields which need to be textareas, to allow up to 255 characters; but I don't want to take up space unnecessarily. Ideally the textarea would begin with a single line, and grow as text is added via data entry (and shrink back as text is deleted).

                <div class="form-group row">
                    <div class="col-md-4">
                        <label>@Html.DisplayNameFor(model => model.FundAgreements)</label>
                    </div>
                    <div class="col-md-8">
                        @Html.TextAreaFor(model => model.FundAgreements, 1, 100, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.FundAgreements)
                    </div>
                </div>

Open in new window


When I had a simple HTML5 form, without Bootstrap, I was able to use the below in $(document).ready for <textarea>, but so far have been unable to modify it successfully to work with Html.TextAreaFor.

 <textarea id="FundAgreements" class="intake-textarea" rows="1" maxlength="255"></textarea>

Open in new window


// Auto resize textarea based on text entered
function resizeTextArea() {
    $(".intake-textarea").keyup(function(e) {
        $(this).height(30);
        $(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
    });
}

Open in new window

0
Comment
Question by:Bryant Farley
1 Comment
 
LVL 38

Accepted Solution

by:
Pawan Kumar earned 2000 total points
ID: 41880472
Try...

<textarea id="FundAgreements" placeholder="placeholder1" onkeyup="Resize(FundAgreements)"></textarea>

function Resize (FundAgreements) 
{
  var aare = document.getElementById(FundAgreements);
  aare.style.height = 'auto';
  aare.style.height = a.scrollHeight+'px';
}

Open in new window

0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Sometimes in DotNetNuke module development you want to swap controls within the same module definition.  In doing this DNN (somewhat annoyingly) swaps the Skin and Container definitions to the default admin selections.  To get around this you need t…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Loops Section Overview
Kernel Data Recovery is a renowned Data Recovery solution provider which offers wide range of softwares for both enterprise and home users with its cost-effective solutions. Let's have a quick overview of the journey and data recovery tools range he…
Suggested Courses
Course of the Month10 days, 3 hours left to enroll

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question