Solved

Automatic sizing of HTML.TextAreaFor based on content

Posted on 2016-11-09
1
37 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 28

Accepted Solution

by:
Pawan Kumar earned 500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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 …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

740 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