Reduce height of div from top, instead of reduce from bottom

Question

I want to make a chat application. my problem is, when my textbox increase it height, the chat-container reduce it height from bottom.

I want the chat container reduce it height from top. For example:

This is my chat-box looklike. And, when my textbox increase it height, it'll show like this

What i expected is like this

And also, when the chat-container is not at bottom, they also reduce it height from top too. like this

This is my code

.chat-container, .chat-content, p, .chat-input {
  box-sizing: border-box;
 padding: 10px;
 border: 2px solid black;
}

.chat-container {
 width: 300px;
 height: 400px;
 display: flex;
 flex-direction: column;
}

.chat-content {
 width: 100%;
 overflow: auto;
 flex-grow: 1;
}

.input-here {
 width: 100%;
 max-height: 150px;
}

.input-here {
 border: 2px solid red;
}

<div class="chat-container">
 <div class="chat-content">
  <p>Hello</p>
  <p>This is example words.</p>
  <p>This is another example #1</p>
  <p>This is another example #2</p>
  <p>This is another example #3</p>
  <p>This is another example #4</p>
  <p>This is another example #5</p>
 </div>
 <div class="chat-input">
  <div contenteditable="true" class="input-here"></div>
 </div>
</div>

Sorry for my bad english. Thank you so much.

Please take a look at my question https://stackoverflow.com/questions/31371125/move-vertical-scroll-from-page-to-inner-div . Here's the example of how it looks https://pychat.org/ (log in) — deathangel908, Dec 09 '17 at 15:31

score 0 · Answer 1 · 2017-12-09T16:36:11.210

0

I think this is what you needed. Changes:

A bit of javascript added to scroll the chat content to the bottom when input is being typed using onkeyUp function.
A overflow-y:scroll added to your chat input so that the text doesn't overflow the max-height otherwise it normally does.
You also might want to reduce the max-height of .input-here to a lower value and it will look much better. Hope, it helps.

// Store your div in a variable
var objDiv = document.getElementById("chat");
// Execute the function once on load
myFunction();
  
function myFunction() {
  objDiv.scrollTop = objDiv.scrollHeight;
}

.chat-container,
.chat-content,
p,
.chat-input {
  box-sizing: border-box;
  padding: 10px;
  border: 2px solid black;
}

.chat-container {
  width: 300px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.chat-content {
  width: 100%;
  overflow: auto;
  flex-grow: 1;
}

.input-here {
  width: 100%;
  max-height: 100px;
  overflow-y: scroll;
}

.input-here {
  border: 2px solid red;
}

<div class="chat-container">
  <div class="chat-content" id="chat">
    <p>Hello</p>
    <p>This is example words.</p>
    <p>This is another example #1</p>
    <p>This is another example #2</p>
    <p>This is another example #3</p>
    <p>This is another example #4</p>
    <p>This is another example #5</p>
    <p>This is another example #6</p>
    <p>This is another example #7</p>
     <p>This is another example #8</p>
  </div>
  <div class="chat-input">
    <div contenteditable="true" class="input-here" onkeyup="myFunction()"></div>
  </div>
</div>

edited Dec 09 '17 at 16:36

answered Dec 09 '17 at 15:28

sorry dude, that's not what i mean.. you should see my last picture.. when the chat-container not in the bottom, it also reduce the div from top. – Raffel Dec 09 '17 at 15:39
As I said, that is because of your max height. Reduce the value of it and it should be fine or change your max height to a fixed height. – Dec 09 '17 at 15:41
See the changes, is that what you mean? – Dec 09 '17 at 15:44
Seriously dude.. that's not the answer.. thanks. – Raffel Dec 09 '17 at 15:48
I'm not really sure what else do you mean by that and seeing no one else has answered, I made the effort but you aren't clear with your last image. – Dec 09 '17 at 15:49
I agree that @Raffel 's last image isn't very clear. I think he means that if the user scrolled up in the conversation (not showing message #8) and if the typing area grows, the conversation container should not auto-scroll to the bottom. I should still only show up to message #7 – blex Dec 09 '17 at 15:55
@blex but in that last image he's seeing post 7 in either scenario. – Dec 09 '17 at 15:57
@Highdef I edited your answer Check this. – acoder Dec 09 '17 at 15:58
@Raffel check the edited answer – acoder Dec 09 '17 at 15:58
@acoder That's not what he was referring to though. The scroll would go down either way as soon as anything is typed but I don't know what he means by the last image of changing height of chat-container, I even improved it to fixed. – Dec 09 '17 at 16:04
If you use min-height then it can keep on expanding. That's not what the OP asked for. – Dec 09 '17 at 16:07
@Raffel check the answer. – acoder Dec 09 '17 at 16:08
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160850/discussion-between-acoder-and-highdef). – acoder Dec 09 '17 at 16:08
@Highdef see the updated version. – acoder Dec 09 '17 at 16:09
@acoder that is totally messed up lol. Try to keep on giving inputs in new lines and you'll see what Im talking about – Dec 09 '17 at 16:11

Reduce height of div from top, instead of reduce from bottom

1 Answers1