CODEWITHSUNDEEP
javascripthtmlcss
Chris stewart
Chris stewart

Reputation: 17

How to auto size chat bubble element based on text content?

I tried to make a demo chat application and I styled a chat bubble but I don't how to achieve the auto size bubble chat. Currently, it has a fixed width and height, and I want the bubble's size to fit the text content.

Here's a scaled down version of what I currently have:

function typo() {
  var currentText = document.getElementById("demo").innerHTML;
  var x = '<p class=bubble>' + document.getElementById("myText").value + '</p>';
  document.getElementById("myText").value = "";
  var y = document.getElementById("demo").innerHTML = currentText + x;
}

var input = document.getElementById("myText");

input.addEventListener("keyup", function(event) {
  event.preventDefault();
  if (event.keyCode === 13) {
    document.getElementById("btn-chat").click();
  }
}); 
.bubble{ 
  clear: both;
  box-sizing: border-box;
  position: relative;
  width: 200px;
  height: 75px;
  padding: 4px;
  background: #C28584;
  border-radius: 10px;
  margin : 30px;
  z-index: -1;
}

.bubble:after{ 
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 11px 30px 11px 0;
  border-color: transparent #C28584;
  display: block;
  width: 0;
  overflow: auto;
  left: -30px;
  top: 31px;
}

.bottom{ 
   position: absolute;
   bottom: 1px;
} 

.widebox{
  width: 100%;
  float: left;
  margin-left: -10px;
}

button {
 float : right;
 margin-left: 250px;
 margin-right: -50px;
 margin-top : -28px;
}
<div class="container">
  <div class="row">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <span class="glyphicon glyphicon-comment"></span> Chat
        <div class="btn-group"></div>
      </div>
    </div>
  </div>        
  <div class="bottom">
    <p id="demo"></p>
    <input class="widebox" type="text" id="myText" value="">
    <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
  </div>
</div>

The demo is here, you can see it in action: https://jsfiddle.net/mzdf0dbw/5/

Upvotes: 1

Views: 2715

Answers (3)

Simon Courtenage
Simon Courtenage

Reputation: 416

This site (bubbly) shows an example of how to achieve the chat bubble using CSS. If you want to experiment with CSS border radius values to get the right bubble "look", try CSS Borders website.

Upvotes: 0

yogesh rathod
yogesh rathod

Reputation: 310

I have made some changes to your code and achieved it. Please see this Fiddle and let me know if this is what desired output is.

<html>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<style>
  .bubble {
    clear: both;
    box-sizing: border-box;
    position: relative;
    width: auto;
    height: auto;
    padding: 4px;
    background: #C28584;
    border-radius: 10px;
    margin: 10px 30px;
    display: inline-block;
    z-index: -1;
    padding-left: 15px;
    /* min-width: 50px; */
    padding-right: 15px;
  }

  .bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 11px 32px 11px 0;
    border-color: transparent #C28584;
    display: block;
    width: 0;
    overflow: auto;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
  }

  .bottom {
    position: absolute;
    bottom: 01px;
  }

  .widebox {
    width: 100%;
    float: left;
    margin-left: -10px;
  }

  button {
    float: right;
    margin-left: 250px;
    margin-right: -50px;
    margin-top: -28px;
  }

</style>

<body>
  <div class="container">

    <div class="row">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <span class="glyphicon glyphicon-comment"></span> Chat
          <div class="btn-group">
          </div>
        </div>
      </div>
    </div>


    <div class="bottom">
      <div id="demo"></div>
      <input class="widebox" type="text" id="myText" value="">
      <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
    </div>
  </div>
  <script>
    function typo() {
      var currentText = document.getElementById("demo").innerHTML;
      var x = '<div><p class=bubble>' + document.getElementById("myText").value + '</div></p>';
      document.getElementById("myText").value = "";
      var y = document.getElementById("demo").innerHTML = currentText + x;
    }

    var input = document.getElementById("myText");
    input.addEventListener("keyup", function(event) {
      event.preventDefault();
      if (event.keyCode === 13) {
        document.getElementById("btn-chat").click();
      }
    });

  </script>

</body>

Upvotes: 0

Marc Schroth
Marc Schroth

Reputation: 57

In your CSS, change height: 75px; to height:auto;

Upvotes: 1

Related Questions