Hello I am trying to design a chat room and am stuck on the css of speech bubbles.

What I want Blue speech bubbles on the right and grey ones on the left.

At the moment I tried several answers I found on SO like position relative/absolute. But none of the answers worked for me. If someone can help me here itd be great.

Html

<div >
    <div >
        <div >

            @foreach ($chats as $chat)
            <p >
                {{$chat->created_at}} @ {{$chat->name}}
            </p>
            <div >
                <p >
                    {{ $chat->message }}
                </p> 
            </div>
            @endforeach

        </div>
    </div>
</div>

Css

.chat-bubble-receive p {
    background: #42a5f5;
    color: #fff !important;
    border-radius: 20px 20px 3px 20px;
    display: block;
    max-width: 75%;
    padding: 7px 13px 7px 13px;
}

.chat-bubble-send p {
    background: #f1f1f1;
    color: #000 !important;
    border-radius: 20px 20px 20px 3px;
    display: block;
    max-width: 75%;
    padding: 7px 13px 7px 13px;
    position: absolute;
    left: 0;
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem 1rem;
}

When the message is short

CodePudding user response：

Chat messages using CSS Flex

• Inside a flex parent, to determine the left/right position of the message elements — use margin-(left/right) set to auto
• When using position:absolute make sure to use position:relative; (or any other position other than static) on a parent element.
• Use bottom: 100% to position the absolute time details on top of the first message.
• "Hide" display:none; by default the "name datetime" pseudo element, but show it display:block; only for the first message in group by using :first-child and the next sibling combinator selector
• You could use the data-* attribute to store the extra details (time etc) and use a pseudo element like ::before to than populate it with that value using content: attr(data-time)

/* QuickReset */ * {margin: 0; box-sizing: border-box;}

.chat {
  --rad: 20px;
  --rad-sm: 3px;
  font: 16px/1.5 sans-serif;
  display: flex;
  flex-direction: column;
  padding: 20px;
  max-width: 500px;
  margin: auto;
}

.msg {
  position: relative;
  max-width: 75%;
  padding: 7px 15px;
  margin-bottom: 2px;
}

.msg.sent {
  border-radius: var(--rad) var(--rad-sm) var(--rad-sm) var(--rad);
  background: #42a5f5;
  color: #fff;
  /* moves it to the right */
  margin-left: auto;
}

.msg.rcvd {
  border-radius: var(--rad-sm) var(--rad) var(--rad) var(--rad-sm);
  background: #f1f1f1;
  color: #555;
  /* moves it to the left */
  margin-right: auto;
}

/* Improve radius for messages group */

.msg.sent:first-child,
.msg.rcvd .msg.sent {
  border-top-right-radius: var(--rad);
}

.msg.rcvd:first-child,
.msg.sent .msg.rcvd {
  border-top-left-radius: var(--rad);
}


/* time */

.msg::before {
  content: attr(data-time);
  font-size: 0.8rem;
  position: absolute;
  bottom: 100%;
  color: #888;
  white-space: nowrap;
  /* Hidden by default */
  display: none;
}

.msg.sent::before {
  right: 15px;
}

.msg.rcvd::before {
  left: 15px;
}


/* Show time only for first message in group */

.msg:first-child::before,
.msg.sent .msg.rcvd::before,
.msg.rcvd .msg.sent::before {
  /* Show only for first message in group */
  display: block;
}

<div >
  <div data-time="16:35" >Hi!<br>What's up?</div>
  <div data-time="Anna 16:36" >Hi dear! <br>Doing some CSS research, you?</div>
  <div data-time="16:38" >Also learning some cool CSS stuff