> On Dec 24, 2019, at 4:38 AM, fugee ohu <fugee...@gmail.com> wrote:
>
> I'm trying to create a chat view where if the sender of the message is the
> current user then the message is displayed on the right side and if the
> sender is the other user then the message is displayed on the left So far
> what I have doesn't right or left float the messages, they all appear in the
> same column
>
> chat.html.erb:
>
> <div>
> <h3>Conversation with <%= @conversation_with.name %>
>
> <div id="message_holder">
> <% @messages.each do |m| %>
> <% if m.sender=@conversation_with %>
> <div><span class="left-float"><%= m.content %></span><br></div>
> <% else %>
> <div><span class="right-float"><%= m.content %></span><br></div>
> <% end %>
> <% end %>
> </div>
>
> application.scss:
>
> .left-float
> {
> float: left;
> }
>
> .right-float
> {
> float: right;
> }
>
A span element is an "inline" element, like an individual character of text. It
has no structure to it at all, unless you give it some by adding display:
inline-block or display: block to it. If you change those spans to divs, you
may see a different visual outcome, because divs are naturally display: block
unless you direct otherwise.
Also, by itself, float left and float right won't give you any visual feedback
unless the floated element is narrower than its parent element. A 100% wide
element floated left doesn't look any different than a 100% wide element
floated right. If I wanted to make a set of chat bubbles, I might start with
this:
span.chat {
display: block;
width: 80%;
padding: .3em .9em;
border-radius: 1em;
background-color: #ccc;
float: left;
}
span.chat.originator {
float: right;
background-color: #cad5ff;
text-align: right;
}
And then amend the ERB to set the base class as well as add the override class
when the message is by the person who started the chat. The result should be
emitted like this:
<span class="chat originator">foo bar baz</span>
<span class="chat">boo blarg blech</span>
You could make this less specific, css-wise, by adding a "chat" class to the
parent div, and then changing the selectors like this:
.chat span {
/* same as first rule above */
}
.chat > .originator {
/* same as the second rule above */
}
<div class="chat">
<span class="originator">foo bar baz</span>
<span>boo blarg blech</span>
</div>
Fool around with these ideas in a regular HTML file, previewed in a browser.
Don't involve Rails in it at all. The problem is most likely in your HTML or
CSS.
Walter
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to rubyonrails-talk+unsubscr...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/rubyonrails-talk/5cee16be-a1df-4748-b842-7bfab60c9e5c%40googlegroups.com.
--
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to rubyonrails-talk+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/rubyonrails-talk/58342DD0-E4D0-436F-A6F7-7A010205AD02%40wdstudio.com.
