function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Courtney MosleyCourtney Mosley 

Dynamically expanding comment box in Salesforce Lightning

Hello everyone. 

I am currently working on a task where I need the comment box on my page to expand dynamically as a user types. I have the current code in my cmp file. Would I need to include "onkeyup=AutoGrow" to the cmp file? I hope I explained this correctly. Thank you for any help!

                    <div onkeypress="{!c.handleEnterKey}"
                         id="user-input-textarea"
                         class="">
                        <lightning:textarea maxlength="400" 
                            label="Comment"
                            name="newCommentName" 
                            placeholder="Write a comment..." 
                            messageWhenValueMissing="{!$Label.c.RC_Comment}"
                            value="{!v.newCommentBody}" 
                            aura:id="commentTextBox"
                            class="llr-ltng-form-ele hide-label disabled-err-msg case-comment-textarea"
                            disabled="{!v.caseType == 'Item' || v.isSubmitting}"
                         />
                    </div>
 
Gulafsha MohammedGulafsha Mohammed
You can manually control the size of the textarea using the CSS height and width parameters. By binding a keypress event to the textarea, you can get the amount of text in the box and adjust the height accordingly. For example, here's some jQuery that will add 20 pixels to the height of the box for every 50 characters you put in:
  
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<textarea id="textbox" style="height:20px;width:400px;"></textarea>

<script type="text/javascript">
$(document).ready(function() {
    $("#textbox").val('');
    $("#textbox").keypress(function() {
        var textLength = $("#textbox").val().length;
        if (textLength % 50 == 0) {
            var height = textLength/50;
            $("#textbox").css('height', 20+(height*20));
        }
    });
});
</script>

Use this css in your lightning component.
You can tweak the values to get the desired effect.
For other solution please visit : https://blog.invoiceberry.com/2011/03/dynamically-change-the-height-of-a-textarea-based-on-the-text-javascript/

Hope this helped.Please mark this as best answer if so.
Thanks,
Gulafsha
Alex StojanovicAlex Stojanovic
Hi guys, have you made this work?
I've been struggling to find a good solution for a day now, any help would be highly appreciated!
Cheers,
Alex