Help us understand the problem. What is going on with this article?

[Rails6]ActionTextの入力フォームが伸びて困る

はじめに

就活のポートフォリオサイトとしてAsobiというWebサイトを作成しました。(QiitaにAsobiに関しての記事を書いています。就活用ポートフォリオとしてWebサービス「Asobi」を作りました。)
このサイトの中でRails6から新しく導入されたActionTextを使っているのですが、入力フォームが行数に応じて伸びてしまいます。

今回はそんなActionTextの入力フォームをいい感じにするためにやったことをご紹介します。

実行環境

  • Ruby 2.6.5
  • Rails 6.0.2

ActionTextとは

Rails6から実装されたリッチテキストコンテンツと編集機能を導入する機能です。

ActionTextのインストールと導入したいモデルとカラムの用意を行い、少しコードを書くだけでブログのようなリッチテキストエディタが導入できます。

actiontext_test.gif

Ajaxを利用した画像のアップロードも実装されており、アップロードされた画像はActiveStorageを利用して保存されます。

actiontext_pic.gif

今回ActionTextの導入に関しては割愛させていただきます。
導入に関しては下記の記事が参考になるかと思います。

Rails6新機能 ActionText使用方法
Rails 6 と Action text を使ってみる - もふもふ技術部

伸びて困る

ActionTextで生成されるリッチテキストエディタの入力フォームは、行数に応じて高さが伸びるようになっています。

デフォルトの挙動

actiontext_default.gif

これをQiitaやはてなブログのような、はみ出た部分をスクロールバーで表示するように実装します。

こんな風な挙動にしたい

actiontext_custom.gif

実装

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となって反映されていきます。

actiontext_dom.gif

なので、入力フォームのスタイルは親要素であるtrix-editorタグのCSSを記述することで調整できそうです。

CSSの記述

入力フォームの高さを固定するためにmin-heightmax-heightを、そして入力フォームからはみ出した部分はoverflow-y: auto;を設定することでスクロールバーで表示できるようにします。

以下のCSSを記述します。(actiontext.scss/app/assets/app/javascriptに生成されていると思うので、そこに追記することをオススメします)

trix-editor {
  min-height: 20em;
  max-height: 20em;
  overflow-y: auto;
}

以上で目指す挙動の入力フォームになっていると思います。

まとめ

ActionTextは新しい機能のため中々情報が出てきません。もしかしたらActionTextの設定ファイルか何かでうまいことやれるかもしれないです。

何か直すべき点、間違った記述があればコメント等で指摘していただければと思います。

参考文献

Trix
https://railsguides.jp/action_text_overview.html

sasakura_870
名古屋でWebエンジニア目指して勉強中です。 Railsの記事を主に書いています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした