css
1 html, body { 2 width: 100vw; 3 height: 100vh; 4 padding: 0; 5 margin: 0; 6 } 7 body { 8 /*タッチデバイスやmacでスクロールされないようにする*/ 9 overflow: hidden; 10 position:absolute; 11 } 12 13 .row { 14 position: relative; 15 overflow: auto; 16 height: 80vh; 17 }
slim
1h1 2 | Chat Room 3 4.container.overflow-auto 5 .row.mt-4 6 .col-10.offset-1 7 #messages data-room_id= @room.id 8 = render @messages 9.container 10 .row 11 .col-8.offset-2.fixed-bottom 12 form id="test_form" class="border" 13 .form-control.border-bottom.border-top-0.border-right-0.border-left-0 14 input type="file" id="picture" class="col-6" 15 input type="button" value="送信" id="chat" class="col-2 offset-4" 16 textarea id="content" class="form-control border-0"
slim
1.message 2 p 3 = message.user.email.sub!(/@.*/m, " さん") 4 = message.content
#実現したいこと
チャットライクなUIを実装しています。
やりたいこととしては、チャットが追加される時にLineやSlackのように下から上にチャットが追加されるようにしたいです。
#困っていること
今現在のUIでは掲示板みた感じになっておりチャットが追加されると上から下にチャットが追加されているのでそれを逆にしたいです。
#使用している技術
Bootstarp4
rails
jquery
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。