Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Automatic sizing of HTML.TextAreaFor based on content

Posted on 2016-11-09
1
Medium Priority
?
54 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 30

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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…
Suggested Courses

722 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