jackの勉強日記

勉強したことをアウトプットするための日記です。

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以外にも指定ができます。

以下のサイトが参考になりました。

web-camp.io

気になる人は見てみてください。