From 15a4fc5dcc8e7a6b51ba5c33e921f0e9b70a0c6e Mon Sep 17 00:00:00 2001 From: geta6 Date: Wed, 19 Apr 2017 22:39:46 +0900 Subject: Automatically change the size of textarea (#2128) --- .../javascripts/components/components/autosuggest_textarea.jsx | 4 ++++ app/assets/stylesheets/components.scss | 9 +++++++-- 2 files changed, 11 insertions(+), 2 deletions(-) (limited to 'app/assets') diff --git a/app/assets/javascripts/components/components/autosuggest_textarea.jsx b/app/assets/javascripts/components/components/autosuggest_textarea.jsx index 04328aae8..7c068955a 100644 --- a/app/assets/javascripts/components/components/autosuggest_textarea.jsx +++ b/app/assets/javascripts/components/components/autosuggest_textarea.jsx @@ -63,6 +63,10 @@ const AutosuggestTextarea = React.createClass({ this.props.onSuggestionsClearRequested(); } + // auto-resize textarea + e.target.style.height = 'auto'; + e.target.style.height = `${e.target.scrollHeight}px`; + this.props.onChange(e); }, diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss index 76a67d8e7..765b43f93 100644 --- a/app/assets/stylesheets/components.scss +++ b/app/assets/stylesheets/components.scss @@ -1196,7 +1196,6 @@ a.status__content__spoiler-link { display: block; box-sizing: border-box; width: 100%; - resize: none; margin: 0; color: $color1; padding: 10px; @@ -1220,11 +1219,17 @@ a.status__content__spoiler-link { } .autosuggest-textarea__textarea { - height: 100px; + min-height: 100px; background: $color5; border-radius: 4px 4px 0 0; padding-bottom: 0; padding-right: 10px + 22px; + resize: none; + + @media screen and (max-width: 600px) { + height: 100px !important; // prevent auto-resize textarea + resize: vertical; + } } .autosuggest-textarea__suggestions { -- cgit