CODEWITHSUNDEEP
javascriptcssfirebasedomgoogle-cloud-firestore
someone
someone

Reputation: 3

How can I make the speech bubbles get bigger and smaller according to the text entered on the page

I am creating a comment box on my website and I want to show every comment with a background like speech bubbles, I don't know the size of the text that the user enters every time, all the methods on the Internet are limited to the specified speech volume.

I use Firestore and JavaScript to save and display comments, and here is a part that is displayed on the page and I want to select Show class speech with speech bubbles.

querysnapshot.forEach(function (doc){
    listDIv.innerHTML +=  " <div class ='user'> <h3>" +"<i class='fas fa-user'></i> "+ 
    doc.data().name +" : " +"</h3>  <p class='speech'>" + doc.data().message + " </p></div>";
  });

Upvotes: 0

Views: 311

Answers (1)

Bil5
Bil5

Reputation: 502

My first thought would be to take benefit of the CSS border-image property since it's able to seamlessly resize itself accordingly to the size of the element it's applied to.

#container {
  width: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.comment {
  border-image: url(https://www.zupimages.net/up/21/18/m734.png) 54 142 144 114 / 20px / 0px stretch;
  width: 100%;
  min-height: 40px;
  padding: 0px 10px 10px;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 20px;
  border-style: solid;
  border-width: 20px;
}
<div id="container">
  <div class="comment">I'm a small comment.</div>
  <div class="comment">
    I'm a big comment.<br />
    I will be displayed on multiple lines.<br />
    And my container should resize itself accordingly.<br />
    With no limit of size.<br />
    Thanks to the border-image property.<br />
  </div>
  <div class="comment">I'm another small comment.</div>
</div>

Upvotes: 1

Related Questions