CSS for messages A and B

Question

CSS for messages A and B

Navigation

#1 by (2 votes)

0

I have the following span with messages exchanged between a user A and a B. How can I configure these spans to appear each in their line. The way I have the style of span it overlaps the messages on the same line.

<div class="jd-user">           
<div class="jd-header" id="44">marisa09 •<span class="close-this"> X </span></div>          
<div class="jd-body"><span class="me"> <span class="me"> Oii </span><span class="me"> teste </span>
<span class="me"> Olá </span>
<span class="other"> Oi </span>

<span class="me"> oii </span></span></div>          
<div class="jd-footer"><input id="textareabox" placeholder="escrever...">  </div>       
</div>

Style:

#jd-chat .jd-body {
overflow: scroll;

min-height: 250px;
background: #FFFFFF;
overflow-x: hidden;
}

#jd-chat .jd-body  span.me
{   


background:#DB3256;
display:block;
border-radius: 25px;
color:white;

}

#jd-chat .jd-body span.other
{
background: #337ab7;
display:block;
float:right;
border-radius: 25px;

}

My other question is, having body of the chat with 250px of maximum width, how can I make the message make a paragraph when it reaches 250px in body

#jd-chat .jd-body

{
overflow: scroll;

max-height:250px;
min-height:250px;
background:#FFFFFF;
overflow-x: hidden;

}

css

asked by anonymous 30.01.2016 / 11:35

1 answer

How to select several? SQL - Update without losing values

score 2 · Accepted Answer

In your code - I do not know if it was missing css - did not work because classes start with id #jd-chat but html does not have this definition, so css is never being applied to html %.

Another point I noticed was that you are embracing both span.me and span.other WITH span.me , that is, it will not have the result you want.

Your HTML would be better organized like this:

<div class="jd-body">
    <div>
        <span class="me"> Oii </span>
        <span class="me"> teste </span>
        <span class="me"> Olá </span>
        <span class="other"> Oi </span>
        <span class="me"> oii </span>
    </div>
</div>

and css:

.jd-body {
    overflow: scroll;
    max-height: 250px;
    min-height: 250px;
    background: #FFFFFF;
    overflow-x: hidden;
}
.jd-body span {
    display:block;

    /*-apenas para estilo-*/
    margin-bottom:10px;
    padding:4px 8px;
    color: white;
}
.jd-body  span.me{   
    background:#DB3256;
    border-radius: 25px;
}
.jd-body span.other {
    background: #337ab7;
    border-radius: 25px;
    text-align:right;
}

See this example of neat code: link

See this example to make the layout a bit cooler: link

Just put every span inside a div.linha , this div is 100% wide and span has only the width of the text inside it, with float left or right depending on whether .me or .other