###前提・実現したいこと
rails4 ローカル環境
現在メッセージ機能を実装してラインのようなメッセージのやりとりができるようにしたいと思っています。
###発生している問題・エラーメッセージ
メッセージ機能は無事に実装できて、メッセージのやり取りをしているページで『相手のメッセージは左側』『自分のメッセージは右側』という表示にして吹き出しをつけて表示しようと思っています。
吹き出しもCSSで実装したのですが、吹き出しをつけると下記の画像のように空の吹き出しが1つ勝手に表示されてしまいます。
原因を探ってみたところ、
CSSで枠線をつけるとこういう現象が出るため枠線の付け方に問題がある?
ただ単に、メッセージのやり取りを一覧で表示して枠線をつけると、このような現象は起きなかったためメッセージの取得に関する記述が間違っている?
怪しいのここら辺かと思っているのですが、解決はできずにいます。
どのようにしたらいいか教えていただけると嬉しいです。
###該当のソースコード
messages/index.html.erb
<div class="container message"> <div class="wrapper col-md-8 col-md-offset-2 col-sm-10 message-index"> <div class="message-user-name"> <p><%= @conversation.target_user(current_user).name %>さんとのメッセージ</p> </div> <!-- メッセージが10件以上あれば以前のメッセージへのリンクを表示する --> <% if @over_ten %> <center><%= link_to '以前のメッセージをすべて表示', '?m=all' %></center> <% end %> <!-- メッセージを一件ずつ抽出 --> <div class="ui segment"> <% @messages.each do |message| %> <% if message.user_id == current_user.id %> <!-- 自分のメッセージ --> <% user = User.find(message.user_id) %> <div class="item-right"> <div class="balloon1"> <%= qiita_markdown(message.body) %> </div> <div class="clear"></div> <p><%= message.message_time %></p> </div> <br> <% else %> <!-- 相手のメッセージ --> <div class="item-left"> <% user = User.find_by(id: message.user_id) %> <%= link_to user_path(message.user_id) do %> <%= profile_img(message.user) %> <% end %> <div id="balloon"> <%= qiita_markdown(message.body) %> </div> <p><%= message.message_time %></p> </div> <% end %> <% end %> </div> <!-- メッセージの送信 --> <%= form_for [@conversation, @message], html: {class: "ui reply form"} do |f| %> <div class="message-field"> <%= f.text_area :body, class: "form-control input-mysize-message" %> <%= f.text_field :user_id, value: current_user.id, type: "hidden" %> <%= f.submit "メッセージを送る" %> </div> <% end %> </div> </div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。