Make a list of text stay above footer but able to scroll them underneath the compose bar

Question

I am trying to scroll a list of messages so that it goes below the compose bar yet when new messages are added they should be added just above the compose bar. For a quick demo of what I mean, see the image in this link.

My Problems:

I am not being able to control the width of the elements of inner div according to its content size.
Not being able to get the desired scroll(as in the image) properly

.contentContainer {
  margin: 0;
  padding: 0;
  margin-top: 68px;
  height: calc(100vh - 68px);
  display: block;
  overflow-y: auto;
}

.content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: inherit;
}

.messageArea {
  flex-grow: 1;
  /*min-width: 400px;*/
  height: inherit;
  position: relative;
}

.scrollingMessagesList {
  height: inherit;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateZ(0);
}

.outer {
  margin: 0 auto;
  margin-top: 18px;
  margin-bottom: 142px;
  height: 414px;
  position: relative;
  background-color: #78909c;
}

.inner {
  margin: 0 20px;
  height: inherit;
  background-color: darkkhaki;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
}

.inner p {
  width: auto;
  max-width: 100%;
  outline: none;
  padding-bottom: 2px;
  background-color: greenyellow;
}

.composeBar {
  z-index: 1029!important;
  border: none;
  bottom: 20px;
}

.compose {
  height: 52px;
  border-radius: 26px;
  background-color: white;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .16), 0 4px 4px 0 rgba(0, 0, 0, .10), 0 3px 3px 0 rgba(0, 0, 0, .08);
  ;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid contentContainer" style="background-color: blanchedalmond;">
  <div class="content">
    <div class="messageArea">
      <div class="scrollingMessagesList">
        <div class="outer">
          <div class="inner">
            <p>Text 1</p>
            <p>Text 2</p>
            <p>Text 3</p>
          </div>
        </div>
      </div>
      <div class="composeBar navbar-fixed-bottom">
        <div class="compose">
        </div>
      </div>
    </div>
  </div>
</div>

Have a look at my answer here: https://stackoverflow.com/questions/34213227/scrollable-div-to-stick-to-bottom-when-outer-div-changes-in-size/34330934#34330934 — Asons, Sep 06 '17 at 07:23
@LGSon, am not sure how to implement it. Although I updated the code and now using flex-direction: reverse I get my threads in reverse order. For ex: Text 1 and Text 2 is shown as Text 2 and Text 1. — Ayan, Sep 06 '17 at 08:52
@LGSon, I could use some help of yours too, if you don't mind — Ayan, Sep 06 '17 at 10:46

Anmol Sandal · Accepted Answer · 2017-09-06T09:55:36.040

Here, you can check i have updated your code, Please review if found helpful.

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).outerHeight();
    $('.inner').css('min-height', windowHeight - 68);
  };
  setHeight();
  
  $(window).resize(function() {
    setHeight();
  });
});

.contentContainer {
  margin: 0;
  padding: 0;
  display: block;
  overflow-y: auto;
  margin-top: 68px;
  height: calc(100vh - 68px);
}

.content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: inherit;
}

.messageArea {
  flex-grow: 1;
  /*min-width: 400px;*/
  height: inherit;
  position: relative;
}

.scrollingMessagesList {
  height: inherit;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateZ(0);
}

.outer {
  margin: 0 auto;
  position: relative;
  background-color: #78909c;
}

.inner {
  margin: 0 20px;
  height: auto;
  background-color: darkkhaki;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 60px;
  align-items: flex-end;
}

.inner p {  
  width: auto;
  max-width: 100%;
  outline: none;
  padding-bottom: 2px;
  background-color: greenyellow;
  
}

.composeBar {
  z-index: 1029!important;
  border: none;
  bottom: 5px !important;
  position: fixed;
}


.compose {
    height: 52px;
    border-radius: 26px;
    background-color: white;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .16), 0 4px 4px 0 rgba(0, 0, 0, .10), 0 3px 3px 0 rgba(0, 0, 0, .08);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid contentContainer" style="background-color: blanchedalmond;">
  <div class="content">
    <div class="messageArea">
      <div class="scrollingMessagesList">
        <div class="outer">
          <div class="inner">
            <p>Text 1</p>
            <p>Text 2</p>
            <p>Text 3</p>
            <p>Text 4</p>
            <p>Text 5</p>
            <p>Text 6</p>
            <p>Text 7</p>
           <p>Text 7</p>
          </div>
        </div>
      </div>    
      <div class="composeBar navbar-fixed-bottom">
         <div class="compose">
         </div>
      </div>
    </div>
  </div>
</div>

What if there is no elements then the div will be squeezed, then? — Ayan, Sep 06 '17 at 07:43
On further testing I found that if there are no elements in the inner div and suddenly a new element is added to it then that element is showed at the top of the inner div whereas it should be few pixels above the compose bar. — Ayan, Sep 06 '17 at 07:58
I have updated my code, have a look. The problem is when the page loads and if the list is long, the list goes below the compose bar. Take a minute look at the image in my question. — Ayan, Sep 06 '17 at 08:55
Hello @ayan i think we need to fix the min height of inner div using jquery , in case there is a long converstaion it will increase automatically. What do you think — Anmol Sandal, Sep 06 '17 at 09:10
Hoping so. But then when the conversation increases the overflow will increase towards bottom hence expanding the message list below the compose div, again not what I want. The overflow should be towards the top so that only when I scroll the list should freely move up and down the vieport height. What do you think? — Ayan, Sep 06 '17 at 09:15
@Ayan, check this out i have set min-height according to window height . Check the updated code please. Let me know if any help required — Anmol Sandal, Sep 06 '17 at 09:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/153757/discussion-between-anmol-sandal-and-ayan). — Anmol Sandal, Sep 06 '17 at 09:27

Make a list of text stay above footer but able to scroll them underneath the compose bar

1 Answers1