railsアプリでスクロール機能をつける
railsのオリジナルアプリで、記事に対してコメント機能を実装しました。
コメント欄を作成し、その中に投稿したコメントを表示することはできたのですが、
コメントが増えると、コメント欄に収まりきらずどんどん下に表示されてしまいます。
解決策ですが、今回はCSSをいじることで簡単に解決しました。
使用するのがoverflowプロパティです。
index.html.erb
<div class="comment-form">
<%= render "commens" %>
</div>
applicaion.scss
.comment-form {
overflow:scroll;
}
コメントは部分テンプレートにしているので、renderで表示しています。
コメントの親要素のdivタグにcssでoverflow:scroll;を付与すると...
<画像>
このようにきちんとスクロール表示ができるようになりました。
overflowには、scroll以外にも指定ができます。
以下のサイトが参考になりました。
気になる人は見てみてください。