0

I want to create a chat application where will be the header with menu and bellow chat box with some messages and on the bottom the fixed part with input for inserting the chat message.

I've tried create the demo of this layout:

https://jsfiddle.net/6dchq2zq/2/

Chat layout

But I don't know how can I fix following issues:

1.) How calculate the height of the content where are messages and according these height show the scollbar. I've tried put the static value - for the demo.

2.) How create fixed bottom part with input which will be responsive

.chat-item{
      background-color: #ffe1e1;
      margin-top: 10px;
      margin-bottom: 10px;
      border-radius: 30px;
      padding: 50px;
    }
    
    .chat-footer{
      background-color: #dfeeff;
      padding: 10px;
    }
    
    .chat-box{
      height: 500px;
      overflow: auto;
    }
<div class="container">
     <div class="chat-box row">
       <div class="col-md-12 chat-item">
        Test Message 1
       </div>
       
       <div class="col-md-12 chat-item">
        Test Message 2
       </div>
       
       <div class="col-md-12 chat-item">
        Test Message 3
       </div> 
       
       <div class="col-md-12 chat-item">
        Test Message 4
       </div> 
     </div>
    </div>
    
     <div class="chat-footer">
       <div class="container">
         <input class="form-control" type="text" placeholder="Message" />
       </div>
     </div>
Jenan
  • 3,408
  • 13
  • 62
  • 105
  • Is there any specific reason you want to know the height of the content? Since you have already done such a good job on css I assume you know the benefits of using AUTO function. (no sarcasm, honest opinions) – Sagar Mar 29 '17 at 13:37
  • You may want to go through the code in this answer -- http://stackoverflow.com/a/33514655/1355315 – Abhitalks Mar 29 '17 at 13:38
  • @Sagar I don't know how do it another way only with specific height. Can you suggest any solution? – Jenan Mar 29 '17 at 13:42
  • Already beaten by someone else on this. Plus you might want to consider adding the code by @Hipady in your **fixed footer**. As for the content.....if you do not have any specific reasons to know the content size then just leave it be. The chat-item will auto size as per the content. You could verify it yourself by adding some garbage text inside. – Sagar Mar 29 '17 at 13:49

1 Answers1

1

I quickly added a couple lines of css

Here's a jsfiddle: https://jsfiddle.net/6dchq2zq/7/

 .navbar {
    position: fixed;
    width: 100%;
 }

 .chat-footer {
    background-color: #dfeeff;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
 }

 .chat-box {
   height: 100%;
   overflow: auto;
   overflow-x: hidden;
   padding: 60px 0;
 }
Bad Hombre
  • 596
  • 5
  • 18