はじめに
就活のポートフォリオサイトとしてAsobiというWebサイトを作成しました。(QiitaにAsobiに関しての記事を書いています。就活用ポートフォリオとしてWebサービス「Asobi」を作りました。)
このサイトの中でRails6から新しく導入されたActionTextを使っているのですが、入力フォームが行数に応じて伸びてしまいます。
今回はそんなActionTextの入力フォームをいい感じにするためにやったことをご紹介します。
実行環境
- Ruby 2.6.5
- Rails 6.0.2
ActionTextとは
Rails6から実装されたリッチテキストコンテンツと編集機能を導入する機能です。
ActionTextのインストールと導入したいモデルとカラムの用意を行い、少しコードを書くだけでブログのようなリッチテキストエディタが導入できます。
Ajaxを利用した画像のアップロードも実装されており、アップロードされた画像はActiveStorageを利用して保存されます。
今回ActionTextの導入に関しては割愛させていただきます。
導入に関しては下記の記事が参考になるかと思います。
Rails6新機能 ActionText使用方法
Rails 6 と Action text を使ってみる - もふもふ技術部
伸びて困る
ActionTextで生成されるリッチテキストエディタの入力フォームは、行数に応じて高さが伸びるようになっています。
デフォルトの挙動
これをQiitaやはてなブログのような、はみ出た部分をスクロールバーで表示するように実装します。
こんな風な挙動にしたい
実装
Rails側でこれを実装する方法を見つけられなかったため、CSSで実装します。
Trixについて
実装の前に、ActionTextに含まれるTrixについて説明します。
Trixとはリッチテキストエディタを実装するJavascriptのライブラリです。(ちなみに開発元はRuby on Railsと同じBasecampです)
Trixのドキュメントを見てみると、
Place an empty <trix-editor></trix-editor> tag on the page. Trix will automatically insert a separate <trix-toolbar> before the editor.
Like an HTML <textarea>, <trix-editor> accepts autofocus and placeholder attributes. Unlike a <textarea>, <trix-editor> automatically expands vertically to fit its contents.
とのことで、ページのTrixのエディタを入れたい場所にtrix-editorタグを書き込むことで使えるようになります。
ActionTextの場合、erbファイルに
<%= form.rich_text_area :body %>
と記述することでtrix-editorタグが生成されます。
そしてリッチテキストエリアへの入力はtrix-editorタグの子要素にDOMとなって反映されていきます。
なので、入力フォームのスタイルは親要素であるtrix-editorタグのCSSを記述することで調整できそうです。
CSSの記述
入力フォームの高さを固定するためにmin-heightとmax-heightを、そして入力フォームからはみ出した部分はoverflow-y: auto;を設定することでスクロールバーで表示できるようにします。
以下のCSSを記述します。(actiontext.scssが/app/assetsか/app/javascriptに生成されていると思うので、そこに追記することをオススメします)
trix-editor {
min-height: 20em;
max-height: 20em;
overflow-y: auto;
}
以上で目指す挙動の入力フォームになっていると思います。
まとめ
ActionTextは新しい機能のため中々情報が出てきません。もしかしたらActionTextの設定ファイルか何かでうまいことやれるかもしれないです。
何か直すべき点、間違った記述があればコメント等で指摘していただければと思います。