CODEWITHSUNDEEP
htmlcss
Alfonso_MA
Alfonso_MA

Reputation: 555

CSS bubble conversation losing format with long texts

I have a bubble conversation like the following:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

ul li {
  max-width: 50vw;
  display: block;
  clear: both;
  padding: 5px;
  border-radius: 20px;
  margin-bottom: 2px;
  background: #eee;
}

.you {
  grid-column: 1/4;
  width: 75%;
  border: 1px solid #000;
}

.me {
  grid-column: 2/4
}
<div>
  <ul id="myConversation" class="afterheader">
    <li class="me">1234</li>
    <li class="me">44</li>
    <li class="me">333</li>
    <li class="me">333</li>
    <li class="you">33</li>
      <li class="me">254</li>
      <li class="me">21345</li>
      <li class="me">long text long text long text long text long text long text long text long text long text long text long text long text </li>
  </ul>
</div>

It is working great with short texts but with longer texts it is losing the bubble format.

Right side is the desired functionality. Left side is an example of the malfunction with long texts:

enter image description here

How can avoid it? (display:grid property is mandatory in this case)

Upvotes: 0

Views: 104

Answers (1)

Heretic Monkey
Heretic Monkey

Reputation: 12113

I think this is just a matter of defining the grid ahead of time, and making sure you're spanning the correct number of columns.

Here's how I would do it:

  1. Define a total of 4 columns.
  2. Make you span columns 1-3.
  3. Make me span columns 2-4.
  4. ...
  5. Profit?

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

ul li {
  display: block;
  clear: both;
  padding: 5px;
  border-radius: 20px;
  margin-bottom: 2px;
  background: #eee;
}

.you {
  grid-column: 1/4;
  border: 1px solid #000;
}

.me {
  grid-column: 2/5;
}
<div>
  <ul id="myConversation" class="afterheader">
    <li class="me">1234</li>
    <li class="me">44</li>
    <li class="me">333</li>
    <li class="me">333</li>
    <li class="you">33</li>
    <li class="me">254</li>
    <li class="me">21345</li>
    <li class="me">long text long text long text long text long text long text long text long text long text long text long text long text </li>
  </ul>
</div>

Upvotes: 1

Related Questions