🪐

【Ruby on Rails】スクロールバーを設置し、投稿欄を使いやすくする

2024/08/06に公開

はじめに

現在Ruby on Railsを使用し記事投稿アプリを作成しております。
記事を投稿する箇所で、文字数が多くなるとそれに合わせてテキスト欄が拡大し、フッターのバーを超えて入力できてしまうという現象に陥りました。
記事投稿というアプリの特性上、比較的長い文章を入力する可能性があるため、この問題を解決する必要がありました。
今回はどのような方法を採用したのかを記事にしたいと思います。
参考になりましたら幸いです。

解決方法

  • テキストエリアにstyle: "overflow:auto;を追加し、文字数が増えた場合にはテキスト欄が拡大するのではなく、元のテキスト欄の大きさを維持したままスクロールバーが設置される。
    下記はそのイメージ画像とコード該当箇所になります。
    Image from Gyazo

  • app/views/articles/new.html.erb

 <%= form.text_area :body, id: 'markdown', placeholder: '本文',
                                    class: 'bg-white text-gray-600 textarea textarea-bordered h-screen', style: "overflow:auto;" %>

当初はフッターを固定することばかり考えておりましたが、文字数に合わせてスクロールバーが表示された方がユーザーも使用しやすいのではないかと考え、この仕様にしました。

上記スクロールバーはこちらの記事を参考に設定しました。

ちょっとした変化ですが、ユーザーにいかに不快感を与えずアプリから離脱させないかを考えて今後もて開発を進めていきたいと考えております。

参考になりましたら幸いです。
最後までお読みいただき、ありがとうございました。

Discussion