Creating expandable chat text input with maximum height with no JS

Question

I'm trying to implement the following design (For now I'm just worried about the text box):

When typing:

Maximum height: Notice the top and bottom paddings were decreased.

Now, this is what I have so far:

.chat-wrapper {
  width: 100%;
}

.message-text {
  resize: none;
  box-sizing: border-box;
  height: auto;
  min-height: 41px;
  max-height: 97px;
  width: 387px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background-color: #f9fafb;
  outline: none;
  padding: 0 24px 0 24px;
  overflow: hidden;
}

textarea {
  resize: none;
  box-sizing: border-box;
  height: auto;
  min-height: 41px;
  max-height: 97px;
  width: 387px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background-color: #f9fafb;
  outline: none;
  padding: 0 24px 0 24px;
  overflow: hidden;
}

<div class="chat-wrapper">
  <p>
    Using div with contentEditable:
  </p>
  <div class="message-text" contentEditable></div>
  <br/>
  <p>
    Using regular textarea:
  </p>
  <textarea></textarea>
</div>

Now for the input text box, I have two solutions:

Using div with contentEditable attribute, it works and it is expandable to a certain height. But the text is not centered vertically (I'm trying to avoid using Flex, just to make sure old browsers are compatible, not very strict about that though)
Using textarea, it is more semantic IMHO, but it doesn't expand automatically.

I want also to detect the keypress event (I don't think it is a problem in both solutions).

Which solution do you think is the web standard? If both are good, how do make the div centers the text, and shrink the paddings when it grows? Or in the case of textarea, how do I make it expand without JS?

Also if you have any better suggestions, let me know.

UPDATE: I just realized how messy is the option (div with contentEditable): As you can see, first I can't wrap the text to lines when the text is more than the width. Second, the text inside the div, is not clean ! Especially when copy-pasting. I need it to be pure text so when I use JS to get the content, I get just the text not the html tags.

Possible duplicate of https://stackoverflow.com/questions/54382971/as-in-whatsapp-how-to-make-an-input-that-extends-to-upwards-as-you-type — doğukan, Feb 20 '19 at 19:22
Your on it today @DogukanCavus good job no clue why your q was downvoted either — soulshined, Feb 20 '19 at 19:31

score 3 · Answer 1 · edited Feb 24 '19 at 17:54

I'm assuming that you want your padding preserved and it that case you could do something like this with contenteditable.

Add the wrapper around the .message-text:


    <div class="chat-wrapper">
      <p>
        Using div with contentEditable:
      </p>
      <div class="message-wrapper">
        <div class="message-text" contentEditable></div>
      </div>
    </div>

Update CSS:

    .chat-wrapper {
      width: 100%;
    }

    .message-text {
      min-height: 1em; /* prevent height collapsing when there is no text */
      max-height: 97px;
      width: 100%;
      align-content: center;
      outline: none;
      overflow: hidden;
    }

    .message-wrapper {
      width: 387px;
      border: 1px solid #e4e7ec;
      border-radius: 20px;
      background-color: #f9fafb;
      padding: 24px; /* the container will keep the padding untouched */
      max-height: 145px; /* added padding to the height of the .message-text */
    }

Check the snippet:

.chat-wrapper {
  width: 100%;
}

.message-text {
  min-height: 1em; /* prevent height collapsing when there is no text */
  max-height: 97px;
  width: 100%;
  align-content: center;
  outline: none;
  overflow: hidden;
}

.message-wrapper {
  width: 387px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background-color: #f9fafb;
  padding: 24px; /* the container will keep the padding untouched */
  max-height: 145px; /* added padding to the height of the .message-text */
}

textarea {
  resize: none;
  box-sizing: border-box;
  height: auto;
  min-height: 41px;
  max-height: 97px;
  width: 387px;
  border: 1px solid #e4e7ec;
  border-radius: 20px;
  background-color: #f9fafb;
  outline: none;
  padding: 0 24px 0 24px;
  overflow: hidden;
}

<div class="chat-wrapper">
  <p>
    Using div with contentEditable:
  </p>
  <div class="message-wrapper">
  <div class="message-text" contentEditable></div>
</div>
  <br/>
  <p>
    Using regular textarea:
  </p>
  <textarea></textarea>
</div>

max-height: 145px for the .message-wrapper is actually the height of content box, and that helps with pushing the .message-text with padding from the top and bottom.

I hope I got the right idea of what you want to achieve,let me know if this helps.

Thanks for your answer. I updated my question as now I'm more concerned about how to get the content of the editable div. Also how to restrict the width of the text to be wrapped to multiple lines. Any ideas? — Nour, Feb 24 '19 at 17:51
I also added a snipped with your suggestion to see it visually, and actually it is not quite the same design I was asking. It is much taller. — Nour, Feb 24 '19 at 17:56

Creating expandable chat text input with maximum height with no JS

1 Answers1