Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Auto Growing text-area [Stimulus] [Rails]
<!-- Some form -->
<div data-controller="auto-grow-textarea">
<%= form.text_area :body, cols: 20, row: 2, placeholder: 'Bir yorum yazın...', class:'form-control', data: { action: 'input->auto-grow-textarea#resize', target: 'auto-grow-textarea.input' } %>
</div>
<!-- Some form continued -->
import {Controller} from "stimulus";
export default class extends Controller {
static targets = ["input"];
connect() {
console.log('auto-grow-textarea controller connected...');
this.inputTarget.style.resize = 'none';
this.inputTarget.style.minHeight = `${this.inputTarget.scrollHeight}px`;
}
resize(event){
event.target.style.height = '5px';
event.target.style.height = `${event.target.scrollHeight}px`;
}
}
@goulvench
Copy link

goulvench commented Jul 14, 2020

Small improvement: you can add this.inputTarget.style.overflow = 'hidden'; at the end of the connect method to prevent the scrollbar from appearing when adding text.

@yunusemredilber
Copy link
Author

yunusemredilber commented Jul 14, 2020

Well, I made it in the CSS but it's a nice tip! It might help others. Thanks, @goulvench.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment