Question 415274 in Html Question posted in
Some basic documentation can be found here.

Html – How to align metadata (time and icon) in a chat bubble layout when text is short?

How it should look "the correct version"

How it looks, "the incorrect version"

The metadata looks ok when the text is long, however, when the text is short for example, the user sends "Ok" the metadata is not positioned correctly.

I have tried using display flex but the problem is the message does not wrap around the metadata which ends up looking like the is too much padding at the right. Right now when the user sends a short message like "Ok" the metadata is not shown properly. I can’t find that balance.

html {
  font-family: "Roboto", serif;
}

.chat-window {
  width: 500px;
  display: flex;
}

.message {
  margin: 0;
  font-size: 14.2px;
  position: relative;
  padding: 16px;
}

.message p {
  margin: 0;
}

.sent {
  justify-content: end;
  background-color: #ECF9FD;
}

.metadata {
  float: right;
  position: absolute;
  bottom: 0;
  right: 5px;
  white-space: nowrap;
}

.time {
  font-size: 12px;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

<div class="chat-window">
  <div class="message sent">
    <p>Pel
    </p>
    <span class="metadata">
            <span class="time">21:08</span>
    <span class="tick">
                <svg width="20px" height="20px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none">
                    <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17l5 5 12-12M16 20l2 2 12-12"/>
                  </svg>
            </span>
    </span>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Use javascript, `

    let message = document.querySelector(".message");
if(message.innerText.length < 75){
    message.style.padding = "8px 75px 8px 8px";
}
else{
    message.style.padding = "8px 8px 8px 8px"
}

    `


  2. 0

    Use display: flex for the .message and adjust the styling of the .metadata to ensure it stays aligned properly regardless of the message length.

    I have tried using display flex but the problem is the message does not wrap around the metadata which ends up looking like the is too much padding at the right.

    Maybe display: flex is not used properly. So it would be helpful if you can also provide it.

    Just in case, I will adjust your css code.

    html {
  font-family: "Roboto", serif;
}

.chat-window {
  width: 500px;
  display: flex;
}

.message {
    /* Added */
  display: flex; /* We use flexbox here for the alignment */
  justify-content: space-between; /* This adds space between text and metadata */
  align-items: flex-start; /* Align the items to the top */
    /* End */
  margin: 0;
  font-size: 14.2px;
  position: relative;
  padding: 16px;
}

.message p {
  margin: 0 5px 0 0; /* Adjusted so there will be a gap in time */
}

.sent {
  justify-content: end;
  background-color: #ECF9FD;
}

.metadata {
  /*float: right;
  position: absolute;
  bottom: 0;
  right: 5px;
  white-space: nowrap;*/
  
    /* Change */
  display: flex; /* Instead of absolute, we use flexbox for metadata */
  align-items: center; /* this center item vertically */
  white-space: nowrap; /* use to prevent wrapping */
    /* End */
}

.time {
  font-size: 12px;
}
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">



<div class="chat-window">
  <div class="message sent">
    <p>Ok</p>
    <span class="metadata">
            <span class="time">21:08</span>
    <span class="tick">
                <svg width="20px" height="20px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="none">
                    <path stroke="#535358" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 17l5 5 12-12M16 20l2 2 12-12"/>
                  </svg>
            </span>
    </span>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search