Making div scrollable when using ng-repeat

Question

I'm using ng-repeat to display some messages, and I'm trying to make the "message_area" scrollable as the messages naturally cause overflow over time, but my code doesn't work as expected.

<div class="main_area">

  <div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
    <div class="message_container" ng-if = "message.sender != me._id">
      <div class="message_received">{{message.message}}</div>
    </div>
    <div class="message_container" ng-if = "message.sender == me._id">
      <div class="message_sent_by_me">{{message.message}}</div>
    </div>
  </div>

</div>

.main_area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 325px;
  right: 0;
  height: 100%;
  background: white;
}

#message_area {
  position: relative;
  overflow-y: scroll;
}

.message_container {
  position: relative;
  width: 100%;
  height: 30px;
}

.message_received {
}

.message_sent_by_me {
  position: relative;
  background-color: #0084FF;
  border-radius: 5px;
  width: 100px;
  color: white;
  float: right;
}

I've not been able to understand why my code does not work.

Any suggestions would be appreciated.

Provide sample message data. That could help to test run the code. — Amarnath
– Amarnath, Commented Dec 26, 2015 at 15:02

Hulke · Accepted Answer · 2015-12-26 16:19:38Z

1

You need to set min-height for the #message_area selector.

#message_area {
   position: relative;
   min-height: 50px; // Add This.
   overflow-y: scroll;
}

answered Dec 26, 2015 at 16:19

Hulke

8586 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amarnath · Accepted Answer · 2015-12-26 15:26:23Z

0

Use scroll to your .main_area. When the ever the data gets more than the given height it manages it with scroll bar on y-axis.

.main_area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 325px;
  right: 0;
  height: 100%;
  background: white;
  **overflow-y: scroll;**
}

Working Plunker.

answered Dec 26, 2015 at 15:26

Amarnath

8,89510 gold badges58 silver badges85 bronze badges

Collectives™ on Stack Overflow

Making div scrollable when using ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related