0

I have a textarea on my page and when I load the page I want all the text in the textarea to show without me having to press down arrow or carriage return to move the cursor down to the end of the text. Is there some kind of css I can provide to size the textarea appropriately when the page renders?

When I load the page here is what I see.

enter image description here

here is what I want to see.

enter image description here

here is my razor code and the rendered html

@Html.TextAreaFor(model => model.SelfSummary, new { @id = "profileCatchPhrase", @class = "form-control catchPhraseHideDontTakeUpSpace input-lg", @style = "min-height: 64px; max-height: 460px; margin-top: 10px; max-width: 500px;" })





<textarea name="SelfSummary" class="form-control input-lg valid" id="profileCatchPhrase" aria-invalid="false" aria-describedby="profileCatchPhrase-error" style="height: 188px; margin-top: 10px; min-height: 64px; max-height: 460px; max-width: 500px;" rows="2" cols="20" data-val="true" data-val-maxlength-max="1000" data-val-maxlength="Max length is 1000">test summary!
test summary 1!
test summary 2!
test summary 3 with lots of stuff #(*@#@()*! 
testing to the end if the line alskdjasdkj(*&amp;(#*&amp;$Q#)(*as;dasdkl
what now!</textarea>
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • 2
    You will need Javascript for this, see: http://stackoverflow.com/questions/17772260/textarea-auto-height – frontend_dev Mar 15 '16 at 21:33
  • If you already know the number of lines then you can use rows attribute on textarea – Naman Nehra Mar 15 '16 at 21:52
  • I would need JS for this because the rows will be different depending on what the user has typed in and saved. I'm looking at autosize http://www.jacklmoore.com/autosize/ it looks like what I need but haven't tested it yet. – chuckd Mar 15 '16 at 22:01

0 Answers0