CODEWITHSUNDEEP
htmlcss
fupuchu
fupuchu

Reputation: 307

Chatbox always on the bottom

I'm designing a chat UI for WebView and Mobile only and I was wondering on how do you keep the edit box always on the bottom like WhatsApp or Telegram. The content in the chat box is scrollable depending on the amount of messages like mobile apps and the chat box is fixed. I tried applying fixed height but it will be messed up for different devices.

How do I make the edit box always on the bottom no matter the device height? (Just like WhatsApp or Telegram)

So far only when defining the height will allow the content to be scrollable, percentages don't work.

height:640px;

Here is the fiddle:

https://jsfiddle.net/rrL0nkq7/

Upvotes: 0

Views: 2867

Answers (3)

Prasanth S
Prasanth S

Reputation: 535

.chatcontainer{
    height: 100px;
    position:fixed;
    bottom:0;width:200px;right:0; /*edit your wish*/
    font-size: 0.6em;
    overflow-y: scroll;
}

This will give the container a fixed height and overflow-y scroll which will make your chat scrollable. Is this what you are looking for?

Upvotes: 0

Chiller
Chiller

Reputation: 9738

To fix your editbox in the bottom you need to give it a position:fixed; and bottom:0;

And if the height is known lets say height:50px;then you must add padding-bottom to chatcontainer padding-bottom:50px;because if you don't you will not see the last content of your chatbox

Upvotes: 2

Lasha
Lasha

Reputation: 625

Make textarea for chat box and give it this css

textarea{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:60px;
}

Upvotes: 1

Related Questions